Quelle est la raison de l’échec de la catégorie Tailwind ?

Question

J'ai commencé à utiliser Tailwind et je ne l'utilise actuellement qu'avec JavaScript. Le premier jour, les noms de classe fonctionnaient tous correctement, mais lorsque j'ai ouvert le projet dans VSCode le lendemain, seul le nom de classe Tailwind ajouté auparavant fonctionnait toujours. Si j'essaie d'ajouter plus de noms de classes et de conceptions à mon code HTML, rien ne se passe.

Par exemple, lorsque j'ajoute text-3xl dans la balise h2, la taille de la police du texte ne change pas. De plus, si j'ajoute une nouvelle couleur au texte ou si j'ajoute une couleur d'arrière-plan, cela ne prend pas effet.

Lien vers tout mon code et mes fichiers dans Github

<div class="flex flex-col md:w-1/2">
  <h2 class="text-center text-3xl font-bold md:text-left">Suivez les progrès globaux de l'entreprise</h1>
  <p class="text-center md:text-left mt-4 mb-6">Comprenez comment vos tâches quotidiennes s'intègrent dans une vision plus large. Suivez les progrès depuis le niveau des jalons jusqu’aux moindres détails. Ne perdez plus jamais de vue la situation dans son ensemble. </p>
</div>

Answer 1

Tailwind n'inclut pas toutes les classes utilitaires dans le fichier CSS de sortie. Au lieu de cela, il analyse les classes que vous utilisez dans votre code pendant le processus de génération et ajoute uniquement ces classes au fichier de sortie.

Donc, si vous ajoutez des classes à votre code, vous devez réexécuter le processus de construction, soit manuellement, soit en incluant l'option --watch dans la commande de construction. Par exemple :

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Remarque : C'est également la raison pour laquelle l'ajout d'une classe utilitaire précédemment inutilisée dans l'inspecteur DOM des outils de développement du navigateur n'affecte pas immédiatement les éléments de la page.