Introduction : Au-delà des classes utilitaires classiques
Tailwind CSS excelle en nous permettant d'appliquer rapidement des styles en ligne. Cependant, pour un développeur aguerri, il arrive un moment où la répétition des mêmes classes sur plusieurs éléments frères devient inefficace. Que ce soit dans une liste de navigation, un tableau ou une grille, la verbosité du HTML peut nuire à la lisibilité et à la maintenance.
Heureusement, Tailwind propose une fonctionnalité avancée, souvent sous-estimée : les Variantes Arbitraires (Arbitrary Variants). Bien plus qu'une simple astuce, c'est une porte d'entrée pour réintroduire des sélecteurs CSS complexes directement dans l'attribut class de vos éléments parents.
La mécanique du sélecteur d'enfant
Le cœur de cette technique repose sur la syntaxe des variantes arbitraires, qui permet d'injecter n'importe quel sélecteur CSS entre crochets.
La structure générale est la suivante :
Pour cibler les enfants, nous allons exploiter le caractère &, qui, dans ce contexte de variante arbitraire, fait référence à l'élément qui porte la classe.
Exemple concret : Simplifier une liste
Considérons une liste <ul> dont nous voulons que chaque élément <li> ait un padding vertical de 2 (py-2) et un texte bleu (text-blue-500).
1. Le code initial (Répétition)
Item A
Item B
Item C
Commentaires