Éviter le balisage illisible

Vous ouvrez un gabarit et vous tombez sur une ligne de 340 caractères : un bouton avec dix-huit classes, dont quatre variantes de survol, deux de focus et trois pour l'état désactivé. Trois écrans plus loin, le même bouton, avec dix-sept classes — il manque transition, et personne ne saura dire si c'est délibéré. Un peu plus loin encore, une troisième variante avec bg-emerald-500 au lieu de bg-emerald-600. Trois boutons qui devraient être identiques, trois listes de classes différentes, et aucun moyen de les corriger d'un seul geste.

Le réflexe naturel est de créer une classe .bouton avec @apply. C'est la mauvaise réponse dans la quasi-totalité des cas, et l'équipe de Tailwind le dit elle-même : cette directive existe pour faciliter les migrations, pas pour construire une couche de composants. Elle vous rend exactement ce que vous étiez venu fuir — une feuille de style globale, des noms à débattre, des conflits de spécificité, et du CSS mort que rien ne signale. La bonne réponse tient en une phrase : extrayez un composant, pas une classe. Le duplicata à éliminer n'est pas la liste de classes, c'est le fragment de balisage qui la porte.