Hover, Focus and Other States

A variant makes a utility conditional: hover:bg-sky-700 nests its rule under &:hover. Variants exist for interaction (hover, focus-visible, active), structure (first, odd, nth-3, has-[img], not-first), forms (checked, disabled, invalid, user-invalid), pseudo-elements (before, placeholder, file, backdrop), attributes (aria-expanded, data-active, open) and preferences (motion-reduce, forced-colors, print). They stack, applied left to right since v4. Mark a parent group or an earlier sibling peer (CSS sibling combinators look only forward) to use group-* and peer-*; name nested groups with group/card.

peer-invalid, has-checked, odd and group-open variantsHTMLLive

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid grid-cols-3 gap-4 p-4 text-sm">
  <label>Email
    <input type="email" value="ann@" class="peer w-full border px-1 invalid:border-pink-500">
    <span class="invisible text-pink-600 peer-invalid:visible">Enter a valid address.</span></label>
  <div class="space-y-2">
    <label class="flex gap-2 border p-1 has-checked:bg-indigo-100">
      <input type="radio" name="p" checked> Pro</label>
    <label class="flex gap-2 border p-1 has-checked:bg-indigo-100">
      <input type="radio" name="p"> Free</label>
  </div>
  <ul class="*:p-1 *:odd:bg-slate-100"><li>Ada</li><li>Grace</li><li>Linus</li></ul>
  <details open class="group border p-2"><summary class="list-none">
    <span class="inline-block group-open:rotate-90">&gt;</span> More</summary>Open content</details>
</div>

Browser output of 11

For one-off needs write an arbitrary variant, [&.is-dragging]:cursor-grabbing; for repeated ones, see Adding Custom Styles.

MENU