Tailwind State Variants: hover/focus vs peer/group

01 Basic State Variants

Common Variants

hover: Mouse enter
focus: Keyboard or click focus
active: Mouse down
focus-visible: Keyboard-only focus
👆

Hover me. The card uses group-hover: internally.

02 Peer & Group Variants

Example: Peer Toggle

<input type="checkbox" class="peer">
<div class="peer-checked:bg-emerald-500 peer-checked:text-white">
  Styled when peer is checked
</div>

group-*

Style children based on parent state.

Parent: hover
Child element styles

peer-*

Style siblings based on peer state.

Reacts to previous sibling

03 Arbitrary Variants

v4 Power Move
[&_p]:hover:text-red-400          // child p on hover
[&:has(input:checked)]:bg-emerald-600
group-[:nth-child(odd)]:bg-zinc-800
peer-focus-within:bg-blue-500

Comparison

Aspect Basic (hover/focus) peer / group Arbitrary
Use Case Simple element states Sibling / parent relationships Complex selectors
Readability Excellent Good Lower
HTML Bloat Low Medium High
Performance Best Excellent Good (JIT)

Decision Guide

Use Basic
  • • Single element interaction
  • • Cards, buttons, links
  • • Focus management
Use peer/group
  • • Form labels + inputs
  • • Accordion / tabs
  • • Interactive lists
Use Arbitrary
  • • :has() selector patterns
  • • Complex pseudo-classes
  • • One-off custom logic
Prefer peer- and group- over heavy arbitrary variants for maintainability. Arbitrary variants are powerful escape hatches — use them sparingly.