1. Origine
Tailwind CSS est né en 2017 sous l'impulsion d'Adam Wathan, à partir d'un constat que tout le monde a vécu : sur un projet qui dure, la feuille de style grossit plus vite que le site lui-même. Chaque nouvelle page ajoute ses classes, personne n'ose supprimer les anciennes, et le CSS finit par former un calque parallèle au design qu'il faut maintenir à part.
La proposition est exactement inverse : ne plus nommer les styles, mais les composer à partir d'un vocabulaire fini de classes utilitaires, adossé à une échelle de valeurs définie une fois pour toutes. La version 4, sortie début 2025, a poussé la logique plus loin encore : la configuration vit désormais dans le CSS lui-même, via @theme, et le moteur de compilation a été réécrit pour des temps de build quasi instantanés.
2. Utilité
Le vrai sujet n'est pas d'écrire moins de CSS, c'est d'écrire moins de CSS arbitraire. Sans grille commune, un projet accumule les 13px, les 17px et les gris qui ne viennent de nulle part. Tailwind rend ces écarts visibles : ou bien la valeur existe dans l'échelle du projet, ou bien il faut assumer explicitement une valeur hors grille.
Chez Studio Relief, Tailwind sert de contrat entre la maquette Figma et le code : les tokens du design system (couleurs, containers, easings, rythme de page) sont déclarés dans le thème, et tout le reste s'appuie sur la grille native. Les utilitaires couvrent le layout et les cas ponctuels | dès qu'une section a des états, des pseudo-éléments ou plusieurs points de rupture, on repasse en CSS scopé, avec exactement les mêmes valeurs.
3. Fonctionnalités
Tailwind n'est pas une bibliothèque de composants : c'est une syntaxe raccourcie du CSS, doublée d'un thème central. Tout part de là.
- Classes utilitaires : chaque propriété CSS a son utilitaire, décliné sur une échelle cohérente (espacements, typographie, couleurs, rayons, ombres)
- Thème centralisé :
@themedéclare les tokens du projet (couleurs, polices, breakpoints, easings) directement en CSS, sans fichier de configuration JavaScript - Variantes d'état :
hover:,focus-visible:,group-hover:stylent un état sans écrire de sélecteur - Responsive par préfixe :
sm:,md:,lg:appliquent une règle à partir d'un point de rupture, avec des extensions maison possibles - Mode sombre natif via la variante
dark:, branchée sur la préférence système ou sur une classe - Valeurs arbitraires entre crochets (
top-[3.25rem]) pour les cas hors grille, sans quitter la syntaxe ni ouvrir un fichier CSS - Feuille de style minimale : seules les classes réellement présentes dans les sources sont générées, le CSS livré ne contient aucun style mort
- Compatible avec tout : Astro, Next.js, SvelteKit, Vue ou du HTML statique, l'intégration se fait en une ligne d'import
4. Cas concrets
→ Sur le site Studio Relief, l'échelle Figma (espacements, rayons, tailles de texte) a été mappée une fois pour toutes sur la grille native de Tailwind. Un p-4 en code correspond exactement au « large » de la maquette : pas de table de correspondance à maintenir, pas de token intermédiaire à inventer.
→ Sur une refonte, Tailwind permet de reconstruire les pages section par section sans jamais toucher à une feuille de style globale. Les anciennes règles ne peuvent pas fuir sur les nouveaux écrans, et l'ancien CSS disparaît en même temps que le markup qu'il servait.
5. Prix
Tailwind CSS est entièrement gratuit et open-source, sous licence MIT, sans restriction d'usage commercial. L'équipe finance le projet avec Tailwind Plus, une bibliothèque payante de composants et de templates prêts à l'emploi, totalement optionnelle : elle ne débloque aucune fonctionnalité du framework.
6. Questions fréquentes
Le markup ne devient-il pas illisible avec autant de classes ?
C'est la critique la plus fréquente, et elle est fondée si on met tout dans le HTML. En pratique, on garde les utilitaires pour le layout et les cas simples, et on bascule en CSS scopé dès qu'un bloc a des états ou des pseudo-éléments. Le markup reste lisible, et les valeurs restent celles du thème dans les deux cas.
Tailwind alourdit-il la page ?
C'est plutôt l'inverse. Seules les classes réellement utilisées sont générées : la feuille de style d'un site complet reste de l'ordre de quelques dizaines de kilo-octets, et surtout elle cesse de grossir proportionnellement au nombre de pages.
Faut-il encore savoir écrire du CSS ?
Oui, absolument. Tailwind est une écriture raccourcie du CSS, pas un remplacement : sans comprendre le modèle de boîte, flexbox, grid et la cascade, on utilise les utilitaires à l'aveugle. C'est un accélérateur pour qui connaît le CSS, pas un moyen de l'éviter.
