Tailwind v4 a changé notre façon d'écrire du CSS. Pas dans les classes — dans la quantité qu'on en met. Sur Numelite v2, un composant moyen a 4-5 classes au lieu de 12-15.
Le pivot
Avant, on écrivait :
<button className="bg-primary-500 hover:bg-primary-600 text-white font-medium px-6 py-3 rounded-lg shadow-md transition-colors">
Démarrer
</button>
Maintenant, on écrit :
<button className="btn-primary">Démarrer</button>
Et btn-primary est défini une seule fois, dans un fichier tokens.css,
en termes d'OKLCH. Tous les composants partagent la même définition.
Les tokens qu'on a posés
- Couleurs en OKLCH :
--accent,--ink,--paper,--surface-glass - Espacements sémantiques :
--space-section,--space-card - Rayons :
--radius-md,--radius-2xl - Ombres par couche :
--shadow-glow,--shadow-lift
Le résultat
Les diffs Git sont lisibles. Quand on change un token, les 200 composants qui l'utilisent suivent. Et surtout : un nouvel agent qui rejoint le projet n'a pas besoin de mémoriser une charte — il lit les tokens.
— Fin de l'article · 10 avr. 2026Retour au journal