Cómo arreglar el Intellisense de TailwindCSS en un proyecto Nuxt 3

El problema

Tenía un proyecto con Nuxt 3 y TailwindCSS abierto en VS Code, y el Intellisense de Tailwind no funcionaba bien. Lo primero que probé fue reinstalar la extensión, sin resultado. Después de buscar un rato encontré esta solución, que es la que comparto hoy.

Por qué no funciona

En un proyecto Nuxt existe el directorio .nuxt. Nuxt lo usa durante el desarrollo para generar tu aplicación Vue. Si miras dentro, verás un archivo llamado .nuxt/tailwind.config.cjs. Es decir, Tailwind encuentra dos archivos de configuración en el mismo proyecto: uno en la raíz y otro dentro de .nuxt.

La solución

Puedes decirle a la extensión que ignore el directorio .nuxt. Para excluirlo de tu espacio de trabajo:

• Crea una carpeta /.vscode en la raíz del proyecto.
• Dentro de .vscode, añade un archivo settings.json.
• Copia este código en ese archivo.

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

A partir de ahí el Intellisense de Tailwind debería volver a funcionar.