Tailwind CSS : pourquoi nous l'avons adopte

Tailwind, l'approche utility-first

Tailwind CSS est un framework CSS utilitaire qui propose des classes atomiques pour styliser directement dans le HTML. Au lieu d'écrire du CSS personnalisé, vous composez vos styles avec des classes comme flex, p-4, text-lg, bg-blue-500.

Les critiques habituelles

« Le HTML est illisible », « c'est du CSS inline déguisé », « ça va à l'encontre de la séparation des préoccupations »... Nous avions les mêmes réticences. Puis nous avons essayé sur un vrai projet. Et le verdict est sans appel.

Pourquoi ça fonctionne

• Vitesse de développement : plus besoin d'inventer des noms de classes, plus d'allers-retours entre HTML et CSS. Le gain de temps est réel.
• Cohérence : le système de design tokens (couleurs, espacements, tailles) impose une cohérence visuelle à toute l'équipe.
• Poids du CSS : grâce au purge, le CSS final ne contient que les classes utilisées. Un site Tailwind pèse souvent moins de 10 Ko de CSS.
• Responsive : les préfixes responsive (md:, lg:) rendent le responsive design intuitif et rapide.
• Maintenabilité : supprimer un composant HTML supprime automatiquement son style. Fini le CSS mort qui s'accumule.

Avec quoi on le combine

Tailwind s'intègre parfaitement avec les composants : que ce soit en Blade (Laravel), React, Vue ou même des partials PHP. La logique de composants réutilisables compense la répétition des classes. Pour les éléments de base, la directive @apply permet de créer des classes composites.

Notre conseil

Essayez Tailwind sur un petit projet avant de juger. La courbe d'apprentissage est de 2-3 jours, et les préjugés tombent rapidement face à l'efficacité du workflow. Ce n'est pas pour tout le monde, mais pour nous, c'est devenu indispensable.