Group / Peer Modifiers

Définition

Modificateurs qui permettent de styler un enfant (group-hover:) ou un élément frère (peer-checked:) en fonction de l'état d'un autre élément.

Analogie

Quand papa sourit (group), les enfants changent de couleur. Quand ton voisin coche (peer), tu apparais.

Exemple de code

<div class="group p-4 hover:bg-blue-50">
  <h3 class="group-hover:text-blue-600">Titre</h3>
</div>

<input type="checkbox" class="peer" />
<p class="hidden peer-checked:block">Visible si coche</p>

Cas d'usage

Créer des interactions parent-enfant ou frère-frère sans JavaScript.

Termes liés