Group / Peer Modifiers

Definition

Modificateurs qui permettent de styler un enfant (group-hover:) ou un element frere (peer-checked:) en fonction de l'etat d'un autre element.

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

Creer des interactions parent-enfant ou frere-frere sans JavaScript.

Termes lies