responsive
at
size compares against the nearest ancestor with container-type set.
import { at } from "@sdxc/u/responsive";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.at("md", [u.p(6), u.hstack({ gap: 4 })]) | css({ "@container (min-width: 36rem)": { padding: "...", display: "flex" } }) |
u.at("md", "sidebar", u.p(6)) | css({ "@container sidebar (min-width: 36rem)": { padding: "..." } }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.at("md", [u.p("2.75rem"), u.hstack({ gap: 4 })])Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.at("md", [u.p(6), u.hstack({ gap: 4 })]))Signature
u.at(size: ContainerName | (string & {}), input: UtilityInput<Node>)