Tailwind CSS Intellisense isn't working in a Nuxt project with tailwind configuration inside the nuxt.config.js

[UliPrantz]

What version of Tailwind CSS IntelliSense are you using?

v0.8.5

What version of Tailwind CSS are you using?

"@nuxtjs/tailwindcss": "^4.2.1" and "@tailwindcss/forms": "^0.5.2",

What package manager are you using?

yarn

What operating system are you using?

macOS with Apple chip

Describe your issue

The problem seems to be that the Tailwind CSS Intellisense plugin is triggered by the tailwind.config.js file which isn't mandatory when we put the tailwindcss configuration inside the nuxt.config.js file which is a much cleaner way to bundle all your configurations in one file instead of using different ones for each package. I also can't find a good workaround to trigger the plugin for all Nuxt projects.

[cthom-dev]

I have same issue, clean install of Nuxt.

{
  "name": "nuxt project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "yarn lint:js && yarn lint:prettier",
    "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
  },
  "dependencies": {
    "@nuxt/content": "^1.15.1",
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/pwa": "^3.3.5",
    "core-js": "^3.19.3",
    "graphql-tag": "^2.12.6",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxt/image": "^0.6.2",
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/google-fonts": "^2.0.0",
    "@nuxtjs/tailwindcss": "^4.2.1",
    "@teamnovu/nuxt-breaky": "^1.2.2",
    "autoprefixer": "^10.4.7",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "postcss": "^8.4.14",
    "prettier": "^2.5.1",
    "tailwindcss": "^3.1.2"
  }
}```

[bradlc]

Hey @UliPrantz. The extension requires a tailwind.config.js (or .cjs) file and there are currently no plans to remove this requirement. @nuxtjs/tailwindcss supports tailwind.config.js so the "workaround" is to put your Tailwind config there instead of putting it in the Nuxt config.

[P4sca1]

As of @nuxtjs/tailwindcss v6, it will generate a .nuxt/tailwind.config.cjs file, which contains your complete tailwind config. To use it, edit your .vscode/settings.json file and add "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs".

[zackha]

If you are working with nuxt3, you can try this.

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🚀

[sjkey]

What should I do when the .nuxt/tailwind.config.cjs is not generated at all? I followed documentation; installed tailwind and added it in modules in nuxt.config

[zackha]

What should I do when the .nuxt/tailwind.config.cjs is not generated at all? I followed documentation; installed tailwind and added it in modules in nuxt.config

The source link I have above is broken bro, here is the updated link

[alquezajanmaverick]

as of Nuxt v3.6.1 & @nuxtjs/tailwindcss v6.8.0:

.nuxt.config.ts

tailwindcss: {
    exposeConfig: true,
  },

.vscode -> settings.json "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.d.ts"

[WebLifeOn]

.nuxt.config.ts tailwindcss: { exposeConfig: true, },

.vscode -> settings.json

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

[Inoooooor]

Try out next config combination. Works for Nuxt v3.7.1, Tailwind v6.8.0 In vs.code/settings.json:

  "files.associations": { "*.css": "tailwindcss" },
  "editor.quickSuggestions": { "strings": true }

For me next vscode config didn't workout "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs",

So I just made it old fashioned way In tailwind.config.js content value must be like this:

  content: [
    "components/**/*.{vue,js,ts}",
    "layouts/**/*.vue",
    "pages/**/*.vue",
    "composables/**/*.{js,ts}",
    "plugins/**/*.{js,ts}",
    "App.{js,ts,vue}",
    "app.{js,ts,vue}",
    "Error.{js,ts,vue}",
    "error.{js,ts,vue}",
    "content/**/*.md",
  ],

[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 }

[superdiazzz]

as of Nuxt v3.6.1 & @nuxtjs/tailwindcss v6.8.0:

.nuxt.config.ts

tailwindcss: {
    exposeConfig: true,
  },

.vscode -> settings.json "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.d.ts"

this is works prefectly in nuxt 3 and tailwind 3. I just implemented

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss'],
  tailwindcss: {
    exposeConfig: true,
  },
})

on my nuxt.config.ts without setting up .vscode -> settings.json

[elikemdaniels]

as of Nuxt v3.6.1 & @nuxtjs/tailwindcss v6.8.0:

.nuxt.config.ts

tailwindcss: {
    exposeConfig: true,
  },

.vscode -> settings.json "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.d.ts"

this is works prefectly in nuxt 3 and tailwind 3. I just implemented

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss'],
  tailwindcss: {
    exposeConfig: true,
  },
})

on my nuxt.config.ts without setting up .vscode -> settings.json

This worked for me too. Awesome fix.

[burair886]

.nuxt.config.ts tailwindcss: { exposeConfig: true, },

.vscode -> settings.json "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config/viewer-config.cjs",

[P4sca1]

You shouldn't need exposeConfig. Just follow the editor setup docs.