Tailwind CSS

Allez, parlons de Tailwind CSS. Le framework qui a débarqué et a chamboulé la manière de penser le design web. Si t’as l’impression que tous les devs en parlent, c’est pas pour rien. Mais pourquoi Tailwind a-t-il été créé, et qu’est-ce qu’il résout ?

Tailwind est né d’une frustration : celle des frameworks comme Bootstrap, où tu te retrouves à écrire du HTML rempli de classes toutes faites qui finissent par standardiser tes designs. T'as beau personnaliser, tout le monde utilise les mêmes boutons, les mêmes grilles. Tous les sites se ressemblent.

Avec Tailwind, l’idée est simple : utilise des classes utilitaires pour tout styliser dans ton HTML, sans jamais écrire une ligne de CSS custom. Dit comme ça, ça peut faire peur. Genre, du CSS inline? Vraiment ? Oui, vraiment. Mais au lieu de déclarer des classes globales, tu utilises des petites classes toutes prêtes pour chaque propriété. Tout est géré au niveau de chaque composant.

Pourquoi ça marche ? Parce que Tailwind te donne un contrôle total. Tu fais ce que tu veux, sans te limiter à des composants préfabriqués. Tu construis ton design sans écrire de CSS personnalisé. Et quand t’as des projets qui nécessitent du changement constant, ça devient une bénédiction. Tu modifies quelques classes, et ton design est mis à jour, sans te plonger dans des fichiers CSS interminables.

Les irritants auxquels Tailwind répond?
Le premier, c’est la personnalisation à outrance. Avec Tailwind, tu restes dans ton HTML, et t’as toutes tes classes sous les yeux. Tu veux ajuster une marge ? T’ajoutes une classe `mt-4` et voilà. Plus besoin d’aller farfouiller dans un fichier CSS de 2000 lignes.

Ensuite, la modularité. Avec les frameworks classiques, t’as tendance à définir des composants globaux que tu réutilises un peu partout. Mais, parfois, t’as besoin d’un ajustement spécifique pour un seul composant. Au lieu de tout casser, avec Tailwind tu ajustes directement là où t’en as besoin, sans impacter le reste du design.

Un autre avantage ? La réduction de la dette technique. Le CSS classique, c’est facile de se retrouver avec plein de classes inutilisées. Tailwind te permet d’optimiser tout ça avec un simple coup de PurgeCSS, qui vire toutes les classes inutiles dans ton projet final. Résultat : t’as un CSS ultra-léger.

Mais attention, le premier truc qui fait grincer des dents, c’est que ton HTML peut vite devenir un gros pavé de classes. Quand t’as un composant un peu complexe, t’as parfois 10, 20, voire 30 classes sur une seule balise. Ça peut vite être indigeste. Faut juste t’habituer à voir ton HTML comme une extension de ton CSS.

Si t’es un puriste qui aime séparer clairement structure et style, Tailwind peut te paraître contre-intuitif. Et puis, si t’as un grand projet sans architecture claire, tu peux vite te retrouver avec des composants difficilement maintenables.

Et toi, t’es prêt à plonger dans le monde du utility-first ou tu préfères rester fidèle aux bons vieux frameworks ?