API
Sizing
Width, height, and their limits.
Numbers are scale steps and lengths pass through. --w, --h, --min-w, and --max-w also take the keywords auto, fit-content, min-content, and max-content, at any tier; --size, --min-h, and --max-h take none. For a reading column, prefer the article widths: --max-w: var(--article-lg).
Reference
| Utility | Writes | Value | Tiers | Notes |
|---|---|---|---|---|
--w | inline-size | scale number or length | breakpoints | Keywords: auto, fit-content, min-content, max-content; --before-w / --after-w |
--min-w | min-inline-size | scale number or length | breakpoints | Keywords: auto, fit-content, min-content, max-content; --before-min-w / --after-min-w |
--max-w | max-inline-size | scale number or length | breakpoints | Keywords: auto, fit-content, min-content, max-content; --before-max-w / --after-max-w |
--h | block-size | scale number or length | breakpoints | Keywords: auto, fit-content, min-content, max-content; --before-h / --after-h |
--min-h | min-block-size | scale number or length | breakpoints | --before-min-h / --after-min-h |
--max-h | max-block-size | scale number or length | breakpoints | --before-max-h / --after-max-h |
--size | inline-size, block-size | scale number or length | breakpoints | --before-size / --after-size |
Examples
--w: 3
--w: 4
--w: 6
--w: 11
--w: 100%
<div
style="
--display: flex-col;
--gap: 4;
--w: 100%;
--max-w: 96;
"
>
<div
style="
--display: flex;
--items: center;
--gap: 4;
"
>
<div
style="
--w: 3;
--h: 4;
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
></div>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--w: 3</span
>
</div>
<div
style="
--display: flex;
--items: center;
--gap: 4;
"
>
<div
style="
--w: 4;
--h: 4;
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
></div>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--w: 4</span
>
</div>
<div
style="
--display: flex;
--items: center;
--gap: 4;
"
>
<div
style="
--w: 6;
--h: 4;
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
></div>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--w: 6</span
>
</div>
<div
style="
--display: flex;
--items: center;
--gap: 4;
"
>
<div
style="
--w: 11;
--h: 4;
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
></div>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--w: 11</span
>
</div>
<div
style="
--display: flex;
--items: center;
--gap: 4;
"
>
<div
style="
--w: 100%;
--h: 4;
--bg: var(--color-secondary);
--rounded: var(--radius-sm);
"
></div>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--whitespace: nowrap;
--text: var(--color-muted-foreground);
"
>--w: 100%</span
>
</div>
</div>
--size: 3
--size: 4
--size: 6
--size: 11
--size: 24
<div
style="
--display: flex;
--flex-wrap: wrap;
--items: end;
--gap: 6;
--w: 100%;
--max-w: 96;
"
>
<div
style="
--display: flex-col;
--items: center;
--gap: 2;
"
>
<div
style="
--size: 3;
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
></div>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--size: 3</span
>
</div>
<div
style="
--display: flex-col;
--items: center;
--gap: 2;
"
>
<div
style="
--size: 4;
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
></div>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--size: 4</span
>
</div>
<div
style="
--display: flex-col;
--items: center;
--gap: 2;
"
>
<div
style="
--size: 6;
--bg: var(--color-primary);
--rounded: var(--radius-sm);
"
></div>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--size: 6</span
>
</div>
<div
style="
--display: flex-col;
--items: center;
--gap: 2;
"
>
<div
style="
--size: 11;
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
></div>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--size: 11</span
>
</div>
<div
style="
--display: flex-col;
--items: center;
--gap: 2;
"
>
<div
style="
--size: 24;
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
></div>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--size: 24</span
>
</div>
</div>