Tailwind intellisense not working in nuxt 3 app

[ThimoDEV]

What version of Tailwind CSS IntelliSense are you using?

v0.9.6

What version of Tailwind CSS are you using?

"@nuxtjs/tailwindcss": "^6.2.0",

What package manager are you using?

yarn v1.22.19

What operating system are you using?

Windows

Tailwind config

/** @type {import('tailwindcss').Config} /
module.exports = {
mode: 'jit',
content: [
'./assets/**/.css',
'./components/.{vue,js}',
'./components/**/.{vue,js}',
'./pages/.vue',
'./pages/**/.vue',
'./plugins/**/*.{js,ts}',
'./App.{js,ts,vue}',
'./app.{js,ts,vue}',
'./Error.{js,ts,vue}',
'./error.{js,ts,vue}',
],
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
extend: {
colors: {
strongCyan: 'hsl(171, 66%, 44%)',
lightBlue: 'hsl(233, 100%, 69%)',
darkGrayishBlue: 'hsl(210, 10%, 33%)',
grayishBlue: 'hsl(201, 11%, 66%)',
},
},
},
plugins: [],
}

VS Code settings

{
"tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs",
"prettier.enable": false,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.associations": {
"*.css": "tailwindcss"
},
"tailwindCSS.includeLanguages": {
"html": "html",
"javascript": "javascript",
"css": "css"
},
"editor.quickSuggestions": {
"strings": true
},
"css.validate": false,
"editor.inlineSuggest.enabled": true
}

[Reproduction URL

https://github.com/ThimoDEV/Nuxt3-tailwind-intelli-bug

Describe your issue

The auto complete or hover to see the css functionality stopped working in version 0.9.6 for nuxt 3 tailwind

To reproduce:

Use Tailwind intellisence 0.9.5 with the repro project. Everything works as intended. Update to 0.9.6 and intellisense isn't working anymore.

[bradlc]

Hey @ThimoDEV, thanks for reporting this. Should be fixed in v0.9.7, via #708 👍

[ThimoDEV]

Hey @ThimoDEV, thanks for reporting this. Should be fixed in v0.9.7, via #708 👍

Tested on my end, works indeed, Thanks for the quick fix!

[zackha]

Add the following configuration to your .vscode/settings.json file, so that Tailwind directives have proper autocomplete, syntax highlighting, and linting:

"tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs"
"files.associations": {
    "*.css": "tailwindcss"
}

source: link🚀

[ilyassouK]

I faced the issue of Tailwind IntelliSense not working as expected with Nuxt 3 (NuxtUI), I fixed that by the following steps:

1- Open settings.json by:
1.1- press F1 or Ctrl+Shift+P
1.2- Type "open settings"
1.3- choose Open User Settings (JSON)

2- Following the docs (Link), add the following configuration to your .vscode/settings.json file, so that Tailwind directives have proper autocomplete, syntax highlighting, and linting:
"files.associations": { "*.css": "tailwindcss" }, "editor.quickSuggestions": { "strings": true }

[GojkoGalonja]

With the newest version, after removing these lines "files.associations": { "*.css": "tailwindcss" }, "editor.quickSuggestions": { "strings": true } the suggestions work for me 🤷

[marcustoy]

What I did was adding the following entry into my nuxt.config.ts file:

tailwindcss: {
    exposeConfig: true,
  }

And the intellisense seems to work. Note: I'm on Nuxt 3.11.2 & Tailwindcss 6.11.4.
Hope it helps!