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
Continue with Tailwind CSS
Save the full cheat sheet or work through every related task.