Tailwind CSS Academy · Lesson

Group and Peer Variants

Use the group and peer patterns to style child elements based on the state of a parent or sibling element.

Styling Children Based on Parent State

A common UI challenge is needing to style a child element based on the state of its parent. In plain CSS, this requires the parent-child combinator and custom class names. Tailwind's group and group-* variants solve this cleanly: mark the parent with the group class and prefix any child utility with group-hover:, group-focus:, or other group variants to apply those styles when the parent enters that state.

<!-- Arrow icon appears only on card hover -->
<div class="group flex items-center gap-3 bg-white border rounded-xl p-4 hover:border-blue-500 cursor-pointer transition-colors">
  <div class="flex-1">
    <h3 class="font-semibold">Settings</h3>
    <p class="text-sm text-gray-500">Manage your account</p>
  </div>
  <!-- Arrow is invisible by default, visible on group hover -->
  <span class="text-gray-400 group-hover:text-blue-500 group-hover:translate-x-1 transition-all">
    →
  </span>
</div>

How group Works

The group class on a parent element creates a grouping scope. All descendants can then reference this scope using group-{variant}: prefixes. The magic happens via Tailwind's generated CSS: group-hover:text-blue-500 compiles to .group:hover .group-hover\:text-blue-500. This means the child's style changes only when the ancestor with the group class is hovered — not when any ancestor is hovered.

<!-- How group generates CSS -->
<!-- The group class on parent enables hover detection -->
<div class="group">
  <!-- group-hover: applies when the group div above is hovered -->
  <h2 class="text-gray-700 group-hover:text-blue-600 transition-colors">
    Title changes when parent is hovered
  </h2>
  <p class="text-gray-500 group-hover:text-gray-700 transition-colors">
    Description also changes
  </p>
</div>

All lessons in this course

← Back to Tailwind CSS Academy