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 traditionnel

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.

Comment commencer avec Tailwind

Démarrer est rapide. Pour simplement l'essayer, vous pouvez insérer le script CDN de Tailwind Play et commencer à écrire des classes utilitaires sur une simple page HTML, sans aucune étape de build. C'est la manière la plus rapide d'expérimenter, même s'il est prévu pour le prototypage plutôt que pour la production.

Pour un vrai projet, vous installez Tailwind via votre outil de build - un plugin Vite ou PostCSS, ou l'intégration officielle pour des frameworks comme Next.js, Nuxt ou SvelteKit. À partir de Tailwind v4, la configuration est plus légère, réalisée en grande partie dans le CSS lui-même, et l'étape de build analyse vos fichiers pour repérer les classes que vous utilisez réellement, afin que la feuille de style livrée reste petite. Une fois qu'il est branché, vous écrivez des classes et le framework s'occupe du reste.

Tailwind vs Bootstrap : utility-first ou component-first ?

Le framework auquel Tailwind est le plus souvent comparé est Bootstrap, et la différence est philosophique. Bootstrap est component-first : il fournit des composants prêts à l'emploi comme des boutons, des cartes et des barres de navigation qui ont un certain aspect dès le départ, ce qui vous donne un rendu fini rapidement mais tend vers un style reconnaissable. Tailwind est utility-first : il vous donne les blocs de construction bruts et aucun composant pré-conçu, de sorte que vous pouvez créer n'importe quel rendu voulu mais faites vous-même une plus grande partie de l'assemblage.

Aucun des deux n'est objectivement meilleur. Bootstrap peut être plus rapide pour un panneau d'administration standard ou un prototype où un aspect conventionnel convient. Tailwind l'emporte généralement lorsque vous voulez un design sur mesure sans lutter contre les valeurs par défaut d'un framework, et lorsqu'une équipe valorise la cohérence à travers un design system partagé. De nombreux développeurs qui débutent sur Bootstrap passent à Tailwind dès qu'ils veulent plus de contrôle sur l'apparence finale.

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.