Variants

Variants prefix utilities and apply them only when the variant condition is active:


"hover:bg-slate-700 active:scale-95 focus:border-primary md:p-8 landscape:flex-row"

Variant	Applies when
`hover:`	The pointer is hovering the element
`active:`	The element is actively pressed
`pressed:`	Alias for `active:`
`focus:`	The element has focus
`disabled:`	The element is disabled
`loading:`	The element is loading
`portrait:`	The current layout is portrait
`landscape:`	The current layout is landscape
`tall:`	The current layout matches the tall condition
`short:`	The current layout matches the short condition
`sm:`	The viewport is at least the `sm` breakpoint
`md:`	The viewport is at least the `md` breakpoint
`lg:`	The viewport is at least the `lg` breakpoint
`xl:`	The viewport is at least the `xl` breakpoint
`safe:`	Safe-area aware styling should apply

Responsive breakpoints are mobile-first and configurable in LuiTheme.