Group, peer, and attribute variants
group and peer let a child respond to the state of a related element without custom JavaScript. Add group to a parent and use a variant such as group-hover: on a descendant. peer styles a following sibling based on a preceding peer's state, so DOM order matters.
Attribute variants such as aria-expanded: can reflect application state. They are especially useful for menus and disclosure controls, but styling does not implement the behavior: JavaScript must still toggle the attribute, manage focus, and support keyboard interaction.
Group hover and peer state
<a href="#project" class="group block rounded-xl border p-4 transition hover:border-blue-400 hover:bg-blue-50">
<div class="flex items-center justify-between">
<h3 class="font-semibold text-slate-900 group-hover:text-blue-700">Project dashboard</h3>
<span class="transition-transform group-hover:translate-x-1" aria-hidden="true">→</span>
</div>
<p class="mt-2 text-sm text-slate-600">Open tasks, milestones, and team activity.</p>
</a>
<label class="mt-4 flex items-center gap-2">
<input class="peer size-4" type="checkbox">
<span class="text-sm text-slate-700 peer-checked:font-semibold">Include archived tasks</span>
</label>đź’ˇ The descendant title and arrow react to the card's hover state through
group-hover:. The checkbox is the peer, and its following label text changes weight when checked. These variants style relationships; they do not replace semantic markup.Key Takeaways
- Use focus-visible styles for keyboard accessibility.
- Prefer native HTML states over simulated states.
- Group and peer variants depend on the DOM relationship and order.