Utility-First. Pourquoi cela accélère la création de design systems cohérents — et où l'approche atteint ses limites.
Catégorie · Frontend & UI
Utility-first plutôt que feuille de style.
Tailwind est un framework CSS qui ne livre pas des composants tout faits, mais de petites classes utilitaires : `flex`, `gap-4`, `text-sm`. On stylise directement dans le markup plutôt que dans des feuilles de style séparées que, avec le temps, plus personne n'ose toucher.
Ces classes ne sont pas de l'anarchie, mais l'expression d'un système de tokens : espacements, couleurs et tailles de police proviennent d'une configuration centrale.
Pourquoi c'est plus rapide.
Parce que le design system est ancré directement dans le build. Au lieu d'inventer du CSS, on combine des valeurs définies — la cohérence devient un effet de bord, pas le fruit de la discipline. Les styles morts disparaissent, car les classes inutilisées sont automatiquement retirées du bundle.
Là où l'approche s'arrête.
Les longues chaînes de classes dans le markup demandent un temps d'adaptation, et sans abstraction en composants, la répétition s'installe. Tailwind ne remplace pas un design system — c'est l'outil avec lequel on en met un en œuvre. Quelqu'un doit définir proprement les tokens.