Guides

Si vous avez déjà regardé du code web moderne et vu 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 elle 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 dit utility-first. Au lieu d'écrire des règles de style sur mesure dans un fichier à part, vous construisez un design en combinant de petites classes à usage unique directement dans votre HTML. Une classe règle 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 inverse la logique. Il vous tend une grande boîte à outils de classes utilitaires toutes prêtes, et vous les assemblez comme des briques. Le style vit dans le balisage, juste à côté de l'élément qu'il concerne, au lieu d'un fichier lointain.

Cela semble un petit changement, mais il supprime deux frustrations du quotidien : 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 système de design fixe d'espacements, de couleurs et de tailles fourni avec Tailwind. Comme ces valeurs sont limitées exprès, 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 — règlent 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 vraiment 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 à 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, en Vue ou avec les propres outils de Tailwind — pour écrire la longue liste de classes une fois et 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, appuyé par un système de design intégré et un build de production minuscule. Ce n'est pas la seule façon d'écrire du CSS, et ce n'est pas fait pour tout le monde — mais sa rapidité et sa cohérence expliquent pourquoi tant de sites en 2026 sont construits avec lui.