Tailwind Variants & State Explorer
Variants prefix a utility so it only applies in a state. Interact with each demo to see the
matching prefix fire.
1 · Interactive states — hover / focus / active / disabled
Hover, click, tab to it, then disable it. Each variant (hover:, focus-visible:,
active:, disabled:) layers a different style on the same element.
Save changes
Idle — base styles only
Toggle disabled
<button class="bg-indigo-500 hover: bg-indigo-600 focus-visible: outline-2 active: scale-95 disabled: opacity-40">
2 · group-* — style a child from the parent's state
Mark the parent group, then a child uses group-hover: to react when the
parent is hovered. Hover the card — the arrow moves.
Read the docs →
Hover anywhere on this card; the arrow reacts to the parent.
<a class="group ...">
<span class="group-hover: translate-x-1 group-hover: text-lime-300">→</span>
</a>
3 · peer-* — style a sibling from a form control's state
Mark an input peer; a later sibling reacts with peer-checked:. Tick the box.
☐ I agree to the terms
✓ Thanks — you can continue
<input type="checkbox" class="peer " />
<span class="peer-checked: text-emerald-400">…</span>
4 · data-[state] — the Radix / shadcn key
Radix sets data-state="open|closed" on its parts. You style them with
data-[state=open]:. Click to toggle — the chevron rotates and the label turns accent.
What is a variant? ▾
A variant is a conditional prefix — it applies its utility only when the state matches.
<button data-state="open" class="data-[state=open]: text-lime-300">
<span class="data-[state=open]: rotate-180">▾</span>
</button>