Qu’est-ce qu’un utilitaire de Class Name et pourquoi est-ce essentiel ?

Quand tu codes avec Tailwind CSS, tes classes sont souvent dynamisées selon certaines conditions, ou en fonction de props que tu passes. C’est là que la gestion des class names devient vraiment clé. L’idée générale est de fusionner des classes pour les appliquer de manière conditionnelle, tout en évitant les répétitions ou les conflits de classes.

Cependant, sans un outil pour gérer ça, ton code peut vite devenir un cauchemar à lire et à maintenir. C’est pour cela que des utilitaires comme clsx, twMerge et CN ont été conçus. Ils t’aident à structurer, fusionner, et optimiser tes classes CSS de manière propre, fluide et dynamique.

Voyons ensemble comment cela fonctionne.

La librairie CLSx

Fonctionnement de CLSx

L’une des premières libraries que tu vas rencontrer est clsx. CLSx est conçu pour gérer la fusion des classes en fonction de certaines conditions et éliminer les valeurs fausses comme undefined, null ou 0. Exemple pratique : tu veux afficher du texte avec plusieurs classes, comme un background rouge et une taille de texte dynamique selon une prop isEnable. Avec clsx, tu peux facilement appliquer ces classes en fonction de cette condition.

clsx('bg-red-500',
      {
        'text-xl': isEnable,
        'text-xs': !isEnable
      }
    )

Si isEnable est vrai, text-xl sera appliqué. Sinon, ce sera text-xs qui apparaîtra dans ton HTML. Le tout de manière fluide, sans répéter du code et sans te soucier des valeurs falsy.

Traitement des valeurs nulles avec CLSx

Un autre atout de clsx est qu’il sait gérer les valeurs nulles ou non définies. Si tu passes des valeurs comme undefined ou false, elles ne seront tout simplement pas appliquées. Ce qui est parfait pour éviter que des erreurs n'apparaissent dans ton DOM.

Par exemple, on peut ajouter une condition pour appliquer des classes uniquement si certaines variables sont définies:

clsx('bg-blue-500',
   {
     'text-red-500': isEnabled,
     'text-blue-500': !isEnabled || undefined
   }
)

Dans ce cas, clsx veillera à ne pas appliquer les classes quand elles sont redondantes ou non nécessaires.

Limites de CLSx

Aussi puissante soit-elle, clsx a quelques limitations. Un de ses inconvénients majeurs est qu’il fusionne toutes les classes, même si ces classes entrent en conflit. Par exemple, si tu appliques à la fois bg-red-500 et bg-blue-500, tu te retrouves avec deux règles conflictuelles. Ici, clsx ne peut pas trancher efficacement et cela dépendra de l'ordre dans lequel les classes sont définies.

La librairie TW Merge

Résolution des conflits avec TW Merge

C’est là qu’intervient TW Merge, un utilitaire spécialement conçu pour Tailwind CSS. La principale force de TW Merge est de résorber les conflits de classes en priorisant la dernière classe ajoutée lors de la fusion. Prenons un exemple simple :

twMerge('bg-red-500', 'bg-blue-500')

Dans ce cas, TW Merge va détecter qu’il y a deux classes de fond (background) en conflit et choisira bg-blue-500 car c'est celle qui vient en dernier. Résultat : ton bouton ou ta div aura un fond bleu et non rouge, sans aucun conflit dans ton CSS.

Exemple concret avec TW Merge

Cela devient particulièrement utile lorsque tu veux appliquer des styles dynamiques en fonction de variables, comme :

twMerge(clsx('bg-red-500', isEnabled ? 'bg-blue-500' : 'bg-red-400'))

Si isEnabled est vrai, il choisira la couleur bleue. Sinon, rouge. En supprimant toute ambiguïté dans la gestion des priorités de classes, TW Merge te permet de rationaliser ton code tout en offrant une flexibilité maximale.

Combinaison CLSx et TW Merge

Il est important de comprendre que ces deux bibliothèques, clsx et twMerge, peuvent être utilisées ensemble pour tirer le meilleur parti de chacune. CLSx gère la partie fusion dynamique de classes et le côté conditionnel, tandis que TW Merge prend ensuite le relais pour supprimer les conflits de classes potentiellement problématiques.

CN : L’utilitaire ultime pour Tailwind CSS

Pourquoi utiliser CN ?

Maintenant que nous avons vu les bénéfices des deux outils séparément, il est temps de parler de CN. CN combine ces deux puissants outils dans une seule et unique fonction, te permettant d’abord de fusionner les classes grâce à clsx puis de résoudre les conflits avec TW Merge. C’est l’outil ultime si tu veux un code propre, facile à maintenir, et qui ne prévoit aucune redondance de classes.

Construire CN : pas à pas

Le processus est simple : CN reprend les éléments de clsx, les fusionne avec TW Merge et retourne un ensemble de classes propre, optimisé.

Voici ce à quoi ressemble le code de CN :

function cn(...inputs) {
  return twMerge(clsx(...inputs));
}

Le fonctionnement est exactement ce que tu attends : propre, flexible et tout simplement efficace. CN applique d’abord clsx pour gérer les objets et la logique conditionnelle, puis TW Merge s’assure que les classes de Tailwind se superposent correctement sans conflits.

Exemple pratique avec CN

Imaginons que tu as ce code :

<div
  className={
  cn('text-base',
     isEnabled ? 'text-lg' : 'text-xs',
     'font-bold')
  }
>
  Exemple de texte
</div>

Avec CN, tu es assuré que text-lg ou text-xs prime et que toutes les classes indésirables seront automatiquement éliminées, supprimant tout stress lié à la gestion des class names.

Conclusion

Si tu utilises Tailwind CSS et React, CN est un must. Cette fonction te permet de gérer tes classes CSS de manière propre, conditionnelle et sans conflit. En combinant les forces de clsx et twMerge, tu obtiens une solution tout-en-un qui rend la création d’interfaces rapide et sans désordre.

Si tu veux découvrir en application la puissance de cet utilitaire, découvre les composants réalisés sur https://cuicui.day qui permet donc de toujours passer les bonnes class en props d’un composant React.