Comment Corriger l'Intellisense de TailwindCSS dans un Projet Nuxt3
Dans un projet Nuxt3, l'intellisense de Tailwind CSS ne semble pas fonctionner correctement.
26/01/2023
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 fichiersettings.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.