Comment Corriger l'Intellisense de TailwindCSS dans un Projet Nuxt3

Comment corriger l'intellisense de Tailwind dans un projet Nuxt3

Dans un projet Nuxt3, l'intellisense de Tailwind CSS ne semble pas fonctionner correctement.

26/01/2023

nuxttailwindcss

Problème

J'avais un projet Nuxt3 avec TailwindCSS, ouvert dans VsCode. Mais le problème était que dans mon projet, l'intellisense de Tailwind ne fonctionnait pas correctement. J'ai essayé de réinstaller l'extension Tailwind pour VsCode, mais cela n'a pas résolu le problème. Après quelques recherches, j'ai trouvé une solution de contournement, que je partage ici aujourd'hui.

Pourquoi cette erreur

Dans notre projet Nuxt, nous avons un répertoire .nuxt. Nuxt utilise ce répertoire en phase de développement pour générer votre application Vue. En regardant de plus près, il y a aussi un fichier appelé .nuxt/tailwind.config.cjs, . Ainsi, Tailwind trouve deux fichiers de configuration dans le même projet : l'un dans votre répertoire racine et l'autre dans le répertoire .nuxt.

Solution de Contournement Possible

Une solution possible consiste à indiquer à l'extension d'exclure le répertoire .nuxt. Pour exclure le répertoire .nuxt dans votre espace de travail :

  • Créez un dossier /.vscode à la racine de votre projet.
  • À l'intérieur du dossier .vscode ajoutez un fichier settings.json
  • Copiez le code suivant dans le fichier settings.json file
// /.vscode/settings.json
{
  "tailwindCSS.files.exclude": [
    "**/.git/**",
    "**/node_modules/**",
    "**/.hg/**",
    "**/.svn/**",
    "**/.nuxt/**"
  ]
}

L'intellisense de Tailwind devrait maintenant fonctionner correctement.