API
Responsive
--<utility>--<breakpoint>: a value from that breakpoint up.
Append a breakpoint with a double hyphen: --grid-cols: 1; --grid-cols--md: 2; --grid-cols--xl: 4. Tiers are mobile-first and read the nearest inline-size container; see breakpoints for the thresholds and the container rules.
--grid-cols: 1; --grid-cols--sm: 2; --grid-cols--md: 3; --grid-cols--lg: 4 — expand to widen the
container.
1
2
3
4
5
6
7
8
<div
style="
--display: flex-col;
--gap: 2;
--w: 100%;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>
--grid-cols: 1; --grid-cols--sm: 2; --grid-cols--md: 3; --grid-cols--lg: 4 — expand to widen the
container.
</span>
<div
style="
--display: grid;
--grid-cols: 1;
--grid-cols--sm: 2;
--grid-cols--md: 3;
--grid-cols--lg: 4;
--gap: 6;
--w: 100%;
"
>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
1
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
2
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
3
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
4
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
5
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
6
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
7
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
8
</div>
</div>
</div>Families that take breakpoint tiers: flow, grid, spacing, margin, sizing, typography, and color. Effects (--shadow, --opacity) are state-only.
--display: flex-col; --display--sm: flex-row — stacks on a narrow container, rows out on a wide
one. Expand to see it.
Sidebar
Content
Aside
<div
style="
--display: flex-col;
--gap: 2;
--w: 100%;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>
--display: flex-col; --display--sm: flex-row — stacks on a narrow container, rows out on a wide
one. Expand to see it.
</span>
<div
style="
--display: flex-col;
--display--sm: flex-row;
--gap: 6;
--w: 100%;
"
>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 6;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
Sidebar
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 6;
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
Content
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 6;
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
Aside
</div>
</div>
</div>A single hyphen inside a name is part of the utility (--bg-alpha, --grid-cols); the double hyphen always introduces a modifier.