baseUtilities
Sizing
Width, height, size shorthands, and min/max dimension constraints using logical properties.
Sizing utilities use logical properties (inline-size, block-size) to match document writing mode.
Width & height
Loading components…
<div class="flex flex-col gap-sm w-full max-w-xl"> <div class="flex items-center gap-sm"> <div class="w-xs h-sm bg-primary rounded-sm"></div> <span class="text-xs text-muted-foreground font-strong">w-xs</span> </div> <div class="flex items-center gap-sm"> <div class="w-sm h-sm bg-primary rounded-sm"></div> <span class="text-xs text-muted-foreground font-strong">w-sm</span> </div> <div class="flex items-center gap-sm"> <div class="w-md h-sm bg-primary rounded-sm"></div> <span class="text-xs text-muted-foreground font-strong">w-md</span> </div> <div class="flex items-center gap-sm"> <div class="w-lg h-sm bg-primary rounded-sm"></div> <span class="text-xs text-muted-foreground font-strong">w-lg</span> </div> <div class="flex items-center gap-sm"> <div class="w-full h-sm bg-secondary rounded-sm"></div> <span class="text-xs text-muted-foreground font-strong">w-full</span> </div></div>| Class | Width / height value |
|---|---|
w-0 / h-0 | 0 |
w-px / h-px | 1px |
w-auto / h-auto | auto |
w-full / h-full | 100% |
w-xs / h-xs | var(--step-8) |
w-sm / h-sm | var(--step-24) |
w-md / h-md | var(--step-56) |
w-lg / h-lg | var(--step-72) |
w-xl / h-xl | var(--step-96) |
w-screen | 100vi |
h-screen | 100svh |
w-screen-xs to w-screen-xl | var(--breakpoint-xs) to var(--breakpoint-xl) |
h-screen-xs to h-screen-xl | var(--breakpoint-xs) to var(--breakpoint-xl) |
Square size shorthand
Loading components…
<div class="flex flex-wrap items-end gap-md w-full max-w-xl"> <div class="flex flex-col items-center gap-xs"> <div class="size-xs bg-primary rounded-sm"></div> <span class="text-xs text-muted-foreground font-strong">size-xs</span> </div> <div class="flex flex-col items-center gap-xs"> <div class="size-sm bg-primary rounded-sm"></div> <span class="text-xs text-muted-foreground font-strong">size-sm</span> </div> <div class="flex flex-col items-center gap-xs"> <div class="size-md bg-primary rounded-sm"></div> <span class="text-xs text-muted-foreground font-strong">size-md</span> </div> <div class="flex flex-col items-center gap-xs"> <div class="size-lg bg-primary rounded-md"></div> <span class="text-xs text-muted-foreground font-strong">size-lg</span> </div> <div class="flex flex-col items-center gap-xs"> <div class="size-xl bg-primary rounded-md"></div> <span class="text-xs text-muted-foreground font-strong">size-xl</span> </div></div>size-* sets inline-size and block-size simultaneously:
| Class | Value (both axes) |
|---|---|
size-0 | 0 |
size-auto | auto |
size-full | 100% |
size-xs | var(--gap-xs) |
size-sm | var(--gap-sm) |
size-md | var(--gap-md) |
size-lg | var(--gap-lg) |
size-xl | var(--gap-xl) |
size-screen | 100vi x 100svh |
size-screen-xs to size-screen-xl | var(--breakpoint-*) both axes |
Min and max constraints
| Max width | Max height | Min width | Min height |
|---|---|---|---|
max-w-0 | max-h-0 | min-w-0 | min-h-0 |
max-w-auto | max-h-auto | min-w-auto | min-h-auto |
max-w-full | max-h-full | min-w-full | min-h-full |
max-w-xs to max-w-xl | max-h-xs to max-h-xl | None | None |
max-w-screen | max-h-screen | min-w-screen | min-h-screen |
max-w-screen-xs to xl | max-h-screen-xs to xl | min-w-screen-xs to xl | min-h-screen-xs to xl |
<article class="w-full max-w-screen-sm mx-auto">
Fluid width constrained to sm breakpoint and centered.
</article>