responsive
atMax
The max-width counterpart to at: applies while the nearest container's inline size is at most size.
import { atMax } from "@sdxc/u/responsive";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.atMax("md", [u.p(2), u.flexCol()]) | css({ "@container (max-width: 36rem)": { padding: "...", flexDirection: "column" } }) |
u.atMax("40rem", "ui-dialog", u.flexCol()) | css({ "@container ui-dialog (max-width: 40rem)": { flexDirection: "column" } }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.atMax("md", [u.p("2.75rem"), u.flexCol()])Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.atMax("md", [u.p(2), u.flexCol()]))Signature
u.atMax(size: ContainerName | (string & {}), input: UtilityInput<Node>)