patterncsstailwindTip

group and peer modifiers for styling based on parent or sibling state

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

Tailwind CSS v3.2+ for named groups

grouppeerparent hoversibling statemodifiercompound component

Problem

A child element needs to change its style when a parent is hovered, or a sibling element needs to react to the state of an adjacent form input — but CSS alone requires knowing the parent/sibling selector upfront.

Solution

Use the group and peer modifiers:

<!-- group: parent hover affects children -->
<div class="group rounded-lg border p-4 hover:border-blue-500">
  <h3 class="font-bold group-hover:text-blue-600">Card Title</h3>
  <p class="text-gray-500 group-hover:text-gray-700">Description</p>
</div>

<!-- peer: sibling state affects next sibling -->
<input type="checkbox" class="peer hidden" id="toggle" />
<label for="toggle" class="peer-checked:text-blue-600">Toggle me</label>

<!-- Named groups for nested context -->
<div class="group/outer">
  <div class="group/inner">
    <span class="group-hover/outer:text-red-500 group-hover/inner:text-blue-500">
      Nested groups
    </span>
  </div>
</div>

Why

Tailwind generates CSS selectors like .group:hover .group-hover\:text-blue-600 under the hood, enabling parent-to-child and sibling-to-sibling communication purely in HTML.

Gotchas

peer must be applied to an element that comes BEFORE the peer-* target in the DOM — CSS ~ combinator only works forward.
Named groups (group/name) require Tailwind v3.2+.
group and peer only work with the modifiers that make sense: hover, focus, checked, disabled, etc. Not all modifiers are supported.

Context

When child or sibling elements need to respond to parent or adjacent element state.

Revisions (0)

No revisions yet.