Mise en place de TailwindCSS

Depuis quelques jours, je fais des tests avec ce « Framework ». Le concept est intéressant, même si j’ai du mal à retenir toutes les classes nécessaires à la création d’une page. De plus, je trouve que le code .html résultant n’est plus vraiment lisible. En tout cas, moi, je préfère lire du HTML dans le .html et du CSS dans le .css et non pas des kilomètres de classes ajoutées aux éléments HTML.

J’ai toutefois bien galéré lors de la mise en place de mon 1er projet de test. En effet, je ne comprenais pas pourquoi le .css généré par Tailwind ne comportait que 750 lignes de code, alors que sur toutes les vidéos que je consultais je voyais des 3000 ou 4000 lignes. J’ai ré installé le package plusieurs fois vérifié et re vérifié, mis a jour node.js et je me suis arraché les cheveux pendant 2 soirées.

Ce que je n’avais pas compris, c’est que Tailwind n’écrit dans le .css qu’il génère, que les classes qui sont utilisées dans le .html. Du coup, lorsque je voyait un tuto ou ce fichier avait déjà plusieurs milliers de lignes à l’installation, c’est en fait parce que les utilisateurs partaient toujours d’un document .html comprenant de nombreuses classes.

Je me suis senti bien bête lorsque j’ai découvert cela, puisque je savais que c’était un des atouts de Tailwind. Réduire le nombre de classes non utilisées dans le .css est à la base même de l’idée derrière la création de Tailwind.

Je vous partage donc ici mon rex, en espérant que je vous ferais économiser 2 soirées et quelques poignées de cheveux.