La classe Tailwind qui disparaît sans erreur
Une échelle typographique maison et une fusion de classes qui l'ignore : le HTML livré perd la classe, et rien ne le signale.
AvancéArticle4 étapes10 min
La panne se présente ainsi : le composant reçoit className="text-body-sm text-foreground",
et le HTML construit ne porte que text-foreground. Aucune erreur, aucun avertissement, un
texte à la taille par défaut là où la maquette en demandait une autre.
1. Comprendre qui supprime la classe
tailwind-merge désambiguïse les classes en conflit : entre px-2 et px-4, la dernière
gagne. Pour trancher, il faut classer chaque classe dans un groupe — et il ne connaît que
les groupes de Tailwind. Une échelle maison déclarée en @theme lui est inconnue :
text-body-sm est rangé avec les couleurs de texte, donc jugé en conflit avec
text-foreground, donc supprimé.
2. Reproduire la panne dans un test, pas dans un navigateur
La fonction cn est pure. Le test qui l’attrape tient en une ligne — expect(cn("text-body-sm", "text-foreground")) — et ne demande ni build ni DOM. Cherchée dans le navigateur, la même
panne se présente comme « un style qui ne s’applique pas », et on soupçonne d’abord la
feuille de style.
3. Déclarer les échelles maison
extendTailwindMerge accepte les groupes du thème : espacements, tailles de texte, rayons.
Chaque valeur déclarée là est reconnue comme telle, et cesse d’être confondue avec une
couleur.
4. Empêcher la dérive entre deux fichiers
La liste passée à extendTailwindMerge doit refléter le bloc @theme de la feuille de
style. Rien dans l’outillage ne les tient ensemble : ajouter un token sans l’inscrire ici
ramène exactement la même panne, silencieuse au même endroit. Un commentaire à chaque
extrémité, et un test par groupe, sont ce qui rend l’oubli visible.