Tailwind CSS
Définition
Framework CSS utilitaire qui permet de styler les composants via des classes directement dans le HTML. Évite le CSS bloat et accélère le développement sans sacrifier la cohérence visuelle.
Comment ça marche
Tailwind est un framework CSS utilitaire. Plutôt que d'écrire ses propres règles CSS dans des fichiers séparés, on compose les styles via des classes appliquées directement dans le HTML : flex items-center gap-4 text-lg font-semibold rounded-md bg-slate-900. Chaque classe correspond à une propriété CSS unique, ou à un petit groupe cohérent. À la build, Tailwind scanne votre code, ne garde que les classes effectivement utilisées, et produit un CSS final compact. Le bundle final pèse souvent moins de 10 ko gzippé, même sur des grosses apps.
À quoi ça sert
Le gain principal : pas de fichier CSS qui gonfle au fur et à mesure du projet, pas de conflits de nommage entre composants, pas de classes mortes qui traînent. Le système d'échelles (espacements, tailles, couleurs) impose une cohérence par défaut qui élimine les approximations visuelles. Le développement et l'itération sont beaucoup plus rapides : on voit le rendu en direct sans naviguer entre HTML et CSS, on copie-colle un composant et son style suit. Combiné à un design system, on bâtit des UIs propres en moitié moins de temps qu'avec du CSS classique ou des CSS modules.
Personnalisation et tokens
Tailwind n'impose pas son design : on configure couleurs, espacements, typographies, breakpoints dans tailwind.config.js (ou via CSS variables sur Tailwind v4). Les tokens du design system se branchent directement, et toutes les classes utilitaires en héritent. On peut ajouter ses propres utilities ou composants via @apply quand un pattern revient souvent. La cohérence vient du fait que tout le monde puise dans les mêmes tokens centralisés. Si une couleur de la marque change, on la modifie à un endroit et tout le site suit.
Tailwind en production
Tailwind alimente aujourd'hui des SaaS B2B en production à grande échelle (GitHub Copilot, Shopify, Vercel, OpenAI). La purge automatique garantit un CSS minimal en production, ce qui aide sur les Core Web Vitals. L'écosystème de composants (shadcn/ui, Headless UI, Radix) propose des composants accessibles, stylés via Tailwind, qu'on copie dans son projet et qu'on personnalise librement. C'est devenu la combinaison standard pour les nouvelles apps React et Next.js, au point que beaucoup de templates et de boilerplates partent du couple Next.js + Tailwind par défaut.
Les critiques classiques
On entend deux critiques fréquentes. La première : le HTML devient illisible avec des dizaines de classes. C'est vrai au début, et faux après une semaine d'usage : on apprend à lire des classes Tailwind comme on lit du CSS, et l'extension Prettier les trie automatiquement. La seconde : on duplique du style entre composants. Vrai uniquement si on n'extrait pas en composants React. La règle : un pattern qui se répète plus de deux fois devient un composant, pas une classe @apply. Le code reste alors propre et factorisé.
Les bonnes pratiques
Quelques règles. Configurer le design system dans tailwind.config.js dès le départ, ne pas accepter de valeurs en dur dans le code (text-[14px] doit être text-sm). Utiliser tailwindcss-prettier-plugin pour trier les classes automatiquement. Extraire les composants UI dans des fichiers React partagés (shadcn/ui propose une excellente base). Utiliser cn() (clsx + tailwind-merge) pour composer les classes conditionnelles proprement. Et ne pas réinventer la roue : pour chaque besoin courant (modal, dropdown, tooltip), shadcn/ui ou Radix propose déjà une base accessible et stylée.