| description | Use when applying conditional styles in Tailwind: hover, focus, active, dark mode, responsive breakpoints, group-* and peer-* combinators, aria-* and data-* attribute variants, has-* and not-* selectors, position-in-parent variants (first, last, *, nth-*), or arbitrary [&...] variants. Use also when stacking multiple variants (`md:hover:dark:bg-blue-500`) and the resulting selector does not match the intended element. Use also when migrating variant chains from Tailwind v3 to v4: the stacking order flipped from right-to-left to left-to-right and is the #1 silent breakage during upgrade. Prevents the common mistakes of (a) reading a v3 stack like `first:*:pt-0` and expecting the same compiled selector in v4 (it is now `*:first:pt-0`), (b) writing hover variants that mysteriously stop working on touch devices in v4 (hover is now gated on `@media (hover: hover)`), (c) writing `!flex` important syntax that fails silently in v4 (the bang moved to the trailing position: `flex!`), (d) using unscoped `group-hover:` when a named group `group/sidebar` is required for nested group hierarchies, (e) trying `not-hover:opacity-75` in v3 (`not-*` is v4-only), and (f) registering custom variants via `addVariant()` in a v4 project (use `@custom-variant` instead). Covers every variant family in v3.4 and v4: pseudo-class (hover, focus, focus-within, focus-visible, active, visited, target, first, last, odd, even, nth-*, first-of-type, empty, disabled, enabled, checked, indeterminate, required, valid, invalid, autofill, read-only, open, inert), pseudo-element (before, after, placeholder, file, marker, selection, first-line, first-letter, backdrop, details-content, popover-open), media-query (sm, md, lg, xl, 2xl, max-*, min-[Npx]:, max-[Npx]:, dark, light, motion-safe, motion-reduce, contrast-more, contrast-less, forced-colors, portrait, landscape, print, screen, ltr, rtl), feature-query (supports-*, not-supports-*), attribute (aria-* and aria-[...], data-* and data-[...]), combinator (group-*, peer-*, named groups `group/name`, named peers `peer/name`, has-*, not-*, in-*, starting:*, group-has-*, peer-has-*), position-in-parent (*, **, *:first, *:last, *:odd, *:even, nth-N, nth-[3n+1]), and arbitrary variants ([&:nth-child(3)], [&_p], [@media(...)], [@supports(...)]). Includes the v4 stacking-order flip with migration examples, the `@custom-variant` directive (v4) vs `addVariant()` plugin (v3), the trailing-bang important syntax change, and the hover-on-touch gate. Keywords: variant, hover, focus, active, dark mode, group-hover, peer-checked, named group, group/sidebar, peer/name, aria-checked, data-state, has-checked, not-hover, in-focus, starting, first child, last child, nth-child, odd even, before after, placeholder, file input, marker, selection, backdrop, motion-reduce, print only, rtl, arbitrary variant, stacking order, left to right, right to left, variant order flipped, why does my hover not work on mobile, important modifier, bang flex, flex bang, custom variant, addVariant, @custom-variant, supports query, feature query, why does first:*: not work in v4.
|
