API
Spacing
Padding and margin on the spacing scale.
A bare number is a step on the spacing scale (--p: 4 is 4 × --spacing). The named --space-* tokens map to 1, 2, 4, 6, 11, 24, and 40; use the number in style. Any length works too. Sides are t, r, b, l and set logical properties, so l is the right side in a right-to-left document. Margins also take auto.
Reference
| Utility | Writes | Value | Tiers | Notes |
|---|---|---|---|---|
--p | padding | scale number or length | breakpoints | works tier-only; --before-p / --after-p |
--px | padding-inline | scale number or length | breakpoints | works tier-only; --before-px / --after-px |
--py | padding-block | scale number or length | breakpoints | works tier-only; --before-py / --after-py |
--pt | padding-block-start | scale number or length | breakpoints | works tier-only; --before-pt / --after-pt |
--pr | padding-inline-end | scale number or length | breakpoints | works tier-only; --before-pr / --after-pr |
--pb | padding-block-end | scale number or length | breakpoints | works tier-only; --before-pb / --after-pb |
--pl | padding-inline-start | scale number or length | breakpoints | works tier-only; --before-pl / --after-pl |
--m | margin | scale number or length | breakpoints | Keywords: auto |
--mx | margin-inline | scale number or length | breakpoints | Keywords: auto |
--my | margin-block | scale number or length | breakpoints | Keywords: auto |
--mt | margin-block-start | scale number or length | breakpoints | Keywords: auto |
--mr | margin-inline-end | scale number or length | breakpoints | Keywords: auto |
--mb | margin-block-end | scale number or length | breakpoints | Keywords: auto |
--ml | margin-inline-start | scale number or length | breakpoints | Keywords: auto |
Examples
--p: 2
--p: 4
--p: 6
--p: 11
<div
style="
--display: flex;
--flex-wrap: wrap;
--items: start;
--gap: 6;
"
>
<div
style="
--p: 2;
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
<div
data-ui="text-xs"
style="
--display: grid;
--place-items: center;
--p: 4;
--aspect: 1;
--font-weight: strong;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
>
--p: 2
</div>
</div>
<div
style="
--p: 4;
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
<div
data-ui="text-xs"
style="
--display: grid;
--place-items: center;
--p: 4;
--aspect: 1;
--font-weight: strong;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
>
--p: 4
</div>
</div>
<div
style="
--p: 6;
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
<div
data-ui="text-xs"
style="
--display: grid;
--place-items: center;
--p: 4;
--aspect: 1;
--font-weight: strong;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
>
--p: 6
</div>
</div>
<div
style="
--p: 11;
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
<div
data-ui="text-xs"
style="
--display: grid;
--place-items: center;
--p: 4;
--aspect: 1;
--font-weight: strong;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
>
--p: 11
</div>
</div>
</div>
--p: 6
--p: 6; --pl: 0
--p: 6; --py: 2
<div
style="
--display: flex;
--flex-wrap: wrap;
--items: start;
--gap: 6;
"
>
<div
style="
--p: 6;
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
<div
data-ui="text-xs"
style="
--display: grid;
--place-items: center;
--p: 4;
--aspect: 1;
--font-weight: strong;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
>
--p: 6
</div>
</div>
<div
style="
--p: 6;
--pl: 0;
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
<div
data-ui="text-xs"
style="
--display: grid;
--place-items: center;
--p: 4;
--aspect: 1;
--font-weight: strong;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
>
--p: 6; --pl: 0
</div>
</div>
<div
style="
--p: 6;
--py: 2;
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
<div
data-ui="text-xs"
style="
--display: grid;
--place-items: center;
--p: 4;
--aspect: 1;
--font-weight: strong;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
>
--p: 6; --py: 2
</div>
</div>
</div>
--mx: auto
start
--ml: auto
<div
style="
--display: flex-col;
--gap: 6;
--w: 100%;
--max-w: 96;
"
>
<div
style="
--p: 4;
--bg: var(--color-muted);
--rounded: var(--radius-lg);
"
>
<div
data-ui="text-sm"
style="
--p: 4;
--mx: auto;
--w: fit-content;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
--mx: auto
</div>
</div>
<div
style="
--display: flex;
--p: 4;
--gap: 4;
--bg: var(--color-muted);
--rounded: var(--radius-lg);
"
>
<span data-ui="badge" data-badge-variant="muted">start</span>
<span data-ui="badge" data-badge-variant="primary" style="--ml: auto">--ml: auto</span>
</div>
</div>