Variants

Variants let one utility adapt by breakpoint, interaction state, colour scheme, and user preference.

Responsive variants

Prefix utilities with breakpoint keys from your config. Rules are mobile-first: each prefixed utility applies from that width upwards.

text-sm md:text-base lg:text-lg
grid-cols-1 md:grid-cols-2 lg:grid-cols-4
hidden md:flex

Use state prefixes for hover, focus, focus-visible, active, and disabled behaviour.

hover:bg-brand-90
focus:ring-2
focus-visible:outline-none
active:scale-95
disabled:opacity-50

Motion and colour-scheme variants help meet accessibility needs while keeping utility usage explicit.

dark:bg-neutral-100
motion-reduce:transition-none
forced-colors:border-[CanvasText]

Next step