How to fix TailwindCSS Intellisense in a Nuxt 3 project

The problem

I had a Nuxt 3 and TailwindCSS project open in VS Code, and Tailwind Intellisense wasn't working properly. The first thing I tried was reinstalling the extension, which didn't help. After some digging I found this workaround, and that's what I'm sharing here.

Why it isn't working

A Nuxt project has a .nuxt directory. Nuxt uses it during development to generate your Vue application. If you look inside, you'll find a file called .nuxt/tailwind.config.cjs. So Tailwind finds two config files in the same project: one in the root directory and one inside .nuxt.

The workaround

You can tell the extension to ignore the .nuxt directory. To exclude it from your workspace:

• Create a /.vscode folder at the root of your project.
• Inside .vscode, add a settings.json file.
• Copy the code below into that file.

// /.vscode/settings.json
{
  "tailwindCSS.files.exclude": [
    "**/.git/**",
    "**/node_modules/**",
    "**/.hg/**",
    "**/.svn/**",
    "**/.nuxt/**"
  ]
}

Tailwind Intellisense should start working again from there.