Guides

Si vous avez déjà regardé du code web moderne et croisé des noms de classes comme flex items-center gap-4 rounded-lg bg-blue-600, vous avez rencontré Tailwind CSS. C'est l'une des façons les plus populaires de styliser des sites en 2026, et il fonctionne très différemment du CSS que la plupart des gens apprennent en premier. Ce guide explique ce qu'est Tailwind, comment il marche, et s'il convient à votre projet.

Tailwind CSS est un framework CSS utility-first. Au lieu d'écrire des règles de style personnalisées dans un fichier séparé, vous construisez un design en combinant de petites classes à usage unique directement dans votre HTML. Une classe définit le padding, une autre la couleur, une autre la taille de police. Ensemble, elles stylisent l'élément, et vous n'écrivez presque aucun CSS à la main.

En quoi Tailwind diffère du CSS classique

Le CSS traditionnel vous demande de nommer les choses - une carte, un bouton - puis de décrire chacune dans une feuille de style. Tailwind renverse cette logique. Il vous tend une grande boîte à outils de classes utilitaires toutes prêtes, et vous les assemblez comme des briques. La mise en forme vit dans le balisage, juste à côté de l'élément qu'elle affecte, plutôt que dans un fichier lointain.

Cela paraît un petit changement, mais il supprime deux frustrations quotidiennes : inventer de bons noms de classes, et faire des allers-retours entre votre HTML et votre fichier CSS pour les garder synchronisés. Avec Tailwind, ce que vous voyez dans le balisage est ce que vous obtenez.

Pourquoi les développeurs l'apprécient

L'attrait principal, c'est la rapidité et la cohérence. Vous construisez directement dans le HTML, en utilisant un design system fixe d'espacements, de couleurs et de tailles fourni avec Tailwind. Comme ces valeurs sont volontairement limitées, les pages de toute une équipe s'alignent et restent cohérentes sans grand effort ni dispute sur les pixels.

• flex - transforme un élément en conteneur flexbox pour la mise en page
• p-4 et m-2 - définissent le padding et la marge à partir d'une échelle d'espacement fixe
• text-center - centre le texte à l'intérieur d'un élément
• bg-blue-600 et text-white - choisissent une couleur de fond et de texte dans la palette
• rounded-lg - arrondit les coins d'un élément
• shadow-md - ajoute une ombre portée moyenne

Tailwind garde aussi petit le fichier que vous livrez. Il scanne votre projet, repère les classes utilitaires que vous avez réellement utilisées, et retire tout le reste du build de production. Ainsi, même si la boîte à outils est énorme, la feuille de style finale est minuscule - ce qui aide la page à se charger vite.

L'inconvénient, en toute honnêteté

La critique courante, c'est que le balisage devient encombré. Un seul élément peut porter une douzaine de classes, ce que certains développeurs trouvent laid ou difficile à lire au début. C'est un vrai compromis : vous échangez des fichiers CSS bien rangés contre un HTML plus chargé.

La réponse habituelle est d'extraire les motifs répétés dans des composants - en React, Vue ou avec les propres outils de Tailwind - afin d'écrire une seule fois la longue liste de classes et de la réutiliser partout. Fait ainsi, l'encombrement disparaît en grande partie et la rapidité demeure.

En résumé

Tailwind CSS est un framework utility-first qui stylise les pages en composant de petites classes dans votre balisage, soutenu par un design system intégré et un build de production minuscule. Ce n'est pas la seule façon d'écrire du CSS, et il ne convient pas à tout le monde - mais sa rapidité et sa cohérence expliquent pourquoi tant de sites en 2026 sont construits avec lui.