Group and Peer Variants

9 min read

Styling Children Based on Parent State

The group variant lets you style a child element when a parent is hovered, focused, or otherwise active. Mark the parent with group, then use group-hover:, group-focus:, etc. on the child.

html

<a href="/courses" class="group flex items-center gap-3 rounded-xl p-4 hover:bg-sky-50">
  <span class="text-slate-700 group-hover:text-sky-600 transition-colors">
    Browse Courses
  </span>
  <svg class="size-4 translate-x-0 group-hover:translate-x-1 transition-transform" />
</a>

Peer: Style Siblings Based on State

The peer variant targets a sibling element. Mark an input as peer, then style a subsequent sibling (like a label or error message) with peer-invalid:, peer-focus:, etc.

html

<input
  type="email"
  class="peer rounded border border-slate-300 px-3 py-2 focus:border-sky-500"
  placeholder="Email"
/>
<p class="mt-1 text-sm text-red-500 opacity-0 peer-invalid:opacity-100 transition-opacity">
  Please enter a valid email.
</p>

peer only works with subsequent siblings in the DOM. The peer element must come before the element you are styling.

Ready to test yourself?

Practice Tailwind CSS— quiz & coding exercises