Group & Peer Modifiers in Tailwind CSS

From the Tailwind CSS cheat sheet · States & Variants · verified Jul 2026

Group & Peer Modifiers

Style elements based on parent or sibling state.

html

<!-- Group — style children when parent is hovered -->
<div class="group rounded-lg p-4 hover:bg-gray-100">
  <h3 class="group-hover:text-blue-600">Title</h3>
  <p class="group-hover:text-gray-700">Description</p>
</div>

<!-- Peer — style based on sibling state -->
<input class="peer" type="checkbox" />
<span class="peer-checked:text-green-500">Enabled</span>

💡 group-hover: styles children when the group parent is hovered — no JS needed

⚡ Use named groups (group/card) when nesting groups inside each other

📌 The peer element MUST come before peer-* elements in the HTML — it only works forward

🟢 peer-checked: + sr-only creates custom checkboxes/toggles without JavaScript

grouppeermodifiersinteractive

More Tailwind CSS tasks

Hover, Focus & Other States

Back to the full Tailwind CSS cheat sheet