How to Fix Tailwind CSS IntelliSense in a Nuxt 3 Project

Tailwind CSS IntelliSense settings for a Nuxt 3 project

Tailwind CSS IntelliSense may offer incorrect suggestions in Nuxt 3 when it detects generated configuration files. This workaround tells the VS Code extension to ignore the .nuxt directory.

26th Jan 2023

2 min read

nuxttailwindcss

The problem

I was working on a Nuxt 3 project in VS Code, but Tailwind CSS IntelliSense was not behaving as expected. Reinstalling the extension did not help. After researching the issue, I found a workaround that I am sharing here.

Why it happens

Nuxt generates files in the .nuxt/ directory during development. A generated Tailwind configuration can be detected alongside the configuration in the project root, which may confuse the IntelliSense extension.

Workaround

Configure the VS Code extension to ignore the generated .nuxt directory:

  1. Create a .vscode directory in your project root if it does not already exist.
  2. Create or edit .vscode/settings.json inside it.
  3. Add .nuxt to the extension's excluded files:
{
  "tailwindCSS.files.exclude": ["**/.git/**", "**/node_modules/**", "**/.hg/**", "**/.svn/**", "**/.nuxt/**"]
}

The extension should now ignore Nuxt's generated files when searching for Tailwind classes and configuration.