Part 41: Styling Based on Parent State: group-hover & group-focus

When hovering over a card, you often want to change the color of an icon, title, or button nested deep inside. Tailwind solves this with the group pattern.

1. How the group Pattern Works

1. Mark the parent container with the group class.
2. Add group-hover:* or group-focus:* to any child element inside it.

<a href="#" class="group block max-w-xs p-6 bg-white rounded-xl border border-slate-100 shadow-sm hover:bg-blue-600 transition duration-300">
  <div class="flex items-center gap-3">
    <!-- Icon changes color when the whole card is hovered -->
    <svg class="size-6 text-blue-600 group-hover:text-white transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
    </svg>
    <h3 class="font-bold text-slate-900 group-hover:text-white transition-colors">
      Fast Performance
    </h3>
  </div>
  <p class="mt-2 text-sm text-slate-500 group-hover:text-blue-100 transition-colors">
    Everything updates simultaneously with smooth transitions.
  </p>
</a>

Key Takeaways

• Add group to the parent container.
• Use group-hover:* on child elements to trigger synchronized animations and color transitions.

In Part 42, we will style elements based on sibling state with peer and peer-checked!