Introduction
Tailwind CSS est un framework CSS utilitaire cree par Adam Wathan en 2017. Au lieu de composants pre-styles (comme Bootstrap), Tailwind fournit des classes utilitaires de bas niveau (flex, p-4, text-lg, bg-blue-500) que vous combinez pour creer n'importe quel design.
Avec plus de 82 000 etoiles sur GitHub et une adoption massive (Next.js, Vercel, Shopify, Netflix), Tailwind est devenu le framework CSS le plus populaire en 2026 selon l'enquete State of CSS 2024.
Les avantages
La vitesse de developpement
Avec Tailwind, vous ne quittez jamais votre fichier HTML/JSX. Pas de va-et-vient entre le template et la feuille de style, pas de noms de classes a inventer, pas de fichiers CSS qui grossissent.
La coherence
Les valeurs de Tailwind sont contraintes par un systeme de design tokens. Vous ne pouvez pas utiliser padding: 13px — vous choisissez p-3 (12px) ou p-4 (16px). Cette contrainte force la coherence visuelle.
Le poids CSS constant
Tailwind genere uniquement les classes utilisees (via PurgeCSS / JIT). Un site de 100 pages n'a pas un CSS plus lourd qu'un site de 10 pages. Le poids CSS typique est de 10 a 30 Ko gzippe, quel que soit la taille du projet.
La personnalisation
Le fichier tailwind.config.js centralise tous les design tokens :
module.exports = {
theme: {
extend: {
colors: {
primary: '#D4714B',
text: '#1A1A1A',
},
fontFamily: {
display: ['Source Serif 4', 'Georgia', 'serif'],
},
},
},
};Les inconvenients
La lisibilite du HTML
Le reproche le plus frequent : les longues chaines de classes rendent le HTML verbeux :
<button class="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white text-sm font-medium rounded-full hover:bg-primary/90 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50">
Envoyer
</button>Solutions : extraire les combinaisons repetees dans des composants React/Vue, ou utiliser @apply dans le CSS (avec parcimonie).
La courbe d'apprentissage
Il faut memoriser les noms des classes utilitaires. Heureusement, l'extension VS Code Tailwind CSS IntelliSense offre une autocompletion excellente. Apres quelques jours, les classes deviennent naturelles.
La dependance au framework
Votre HTML est couple a Tailwind. Migrer vers un autre systeme CSS necessite de reecrire tous les templates. C'est un vendor lock-in reel, meme si Tailwind est open source et tres stable.
Les styles inline deguises
Les critiques les plus virulentes comparent Tailwind a des styles inline. C'est en partie vrai — mais avec la contrainte des tokens, le responsive integre et les pseudo-classes (hover, focus), Tailwind offre bien plus que style="".
Quand utiliser Tailwind
- Projets avec des composants reutilisables (React, Vue, Svelte)
- Equipes qui veulent une coherence visuelle sans design system complet
- Projets ou la vitesse de developpement est prioritaire
- Sites avec un design sur-mesure (pas un theme pre-fait)
Quand eviter Tailwind
- Sites bases sur un CMS avec editeur visuel (WordPress avec Elementor, par exemple)
- Projets ou le HTML est genere par un tiers (vous ne controlez pas les classes)
- Tres petits projets ou quelques lignes de CSS vanille suffisent
- Si l'equipe est attachee a la separation stricte HTML/CSS
Conclusion
Tailwind CSS n'est pas une mode passagere — c'est un changement de paradigme dans la facon d'ecrire du CSS. Pour les projets bases sur des composants, il offre un gain de productivite reel et une coherence visuelle naturelle. Le mieux est de l'essayer sur un petit projet pour se faire sa propre opinion.