Variants
Prefix any utility to make it conditional: hover:bg-primary, user-invalid:border-danger, group-hover:text-primary, before:d-inline-block, print:d-none. 45 pseudo-class states, 9 pseudo-elements, environment media queries, direction, and the relational group-* and peer-* pair. One variant per class token — hover:[a b c] cannot work, because the HTML parser splits class on whitespace into a token list before CSS is consulted. Breakpoints stay infix inside the utility (hover:w-md-[40%]), so a variant is a pure prefix and layer routing is unchanged. Variants stack in any order. hover: is emitted inside @media (hover: hover) so it never sticks on touch; relational variants wrap the trigger in :where(), so one variant scores (0,2,0) whether or not it is relational.
Interaction
hover:bg-primaryfocus:bg-primaryfocus-visible:outline-primaryfocus-within:shadow-lgactive:bg-darkvisited:text-secondarytarget:bg-lightForm state
checked:bg-successindeterminate:bg-warningdisabled:opacity-50required:fw-bolduser-valid:border-successuser-invalid:border-dangerread-only:bg-lightplaceholder-shown:fst-italicStructural
first:fw-boldlast:fw-boldonly:text-primaryodd:bg-lighteven:bg-whiteempty:d-nonefirst-of-type:fw-boldPseudo-elements
before:d-inline-blockafter:d-inline-blockmarker:text-primaryplaceholder:fst-italicselection:bg-primaryfirst-letter:fw-boldfile:btn-primarybackdrop:bg-darkEnvironment
motion-safe:shadow-lgmotion-reduce:shadow-nonecontrast-more:fw-boldforced-colors:fw-boldprint:d-noneportrait:d-blocklandscape:d-flexDirection
rtl:text-endltr:text-startRelational — group and peer
group-hover:text-primarygroup-hover:opacity-100peer-checked:text-successpeer-invalid:text-dangerpeer-focus:shadow-lgStacked and responsive
motion-safe:hover:shadow-lghover:w-md-[40%]hover:d-lg-flex