baseUtilities
Spacing
Padding, margin, negative margin, and auto-margin utilities powered by logical properties and composition variables.
Spacing utilities use semantic gap tokens (--gap-xs to --gap-xl) and logical properties (inline, block).
Padding
Loading components…
<div class="flex flex-wrap items-start gap-md"> <div class="bg-muted rounded-md p-xs"> <div class="grid place-items-center bg-primary text-primary-foreground rounded-sm p-sm text-xs font-strong aspect-square" > p-xs </div> </div> <div class="bg-muted rounded-md p-sm"> <div class="grid place-items-center bg-primary text-primary-foreground rounded-sm p-sm text-xs font-strong aspect-square" > p-sm </div> </div> <div class="bg-muted rounded-md p-md"> <div class="grid place-items-center bg-primary text-primary-foreground rounded-sm p-sm text-xs font-strong aspect-square" > p-md </div> </div> <div class="bg-muted rounded-md p-lg"> <div class="grid place-items-center bg-primary text-primary-foreground rounded-sm p-sm text-xs font-strong aspect-square" > p-lg </div> </div></div>| Scope | Classes | Sets |
|---|---|---|
| All sides | p-0, p-xs to p-xl | All four edges |
| Inline axis (left + right) | px-0, px-xs to px-xl | padding-inline |
| Block axis (top + bottom) | py-0, py-xs to py-xl | padding-block |
| Top (block-start) | pt-0, pt-xs to pt-xl | padding-block-start |
| Bottom (block-end) | pb-0, pb-xs to pb-xl | padding-block-end |
| Left (inline-start) | pl-0, pl-xs to pl-xl | padding-inline-start |
| Right (inline-end) | pr-0, pr-xs to pr-xl | padding-inline-end |
Margin
| Scope | Classes |
|---|---|
| All sides | m-0, m-xs to m-xl |
| Inline axis | mx-0, mx-xs to mx-xl, mx-auto |
| Block axis | my-0, my-xs to my-xl, my-auto |
| Per side | mt-*, mr-*, mb-*, ml-* (0, xs to xl, and auto) |
Auto margins
Loading components…
<div class="flex flex-col gap-md w-full max-w-xl"> <div class="bg-muted rounded-lg p-sm"> <div class="w-md mx-auto bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > mx-auto </div> </div> <div class="flex gap-sm bg-muted rounded-lg p-sm"> <span class="ui-badge" data-variant="muted">start</span> <span class="ml-auto ui-badge" data-variant="primary">ml-auto</span> </div></div>mx-auto: Centers a fixed-width block.ml-auto/mr-auto: Pushes a flex child to the opposite edge.
Negative margins
| Scope | Classes |
|---|---|
| All sides | -m-xs to -m-xl |
| Inline / block axis | -mx-xs to -mx-xl, -my-xs to -my-xl |
| Per side | -mt-*, -mr-*, -mb-*, -ml-* (xs to xl) |
Composition variables
Spacing utilities set @property-registered variables with inherits: false. You can combine an all-sides utility with a single-edge utility:
<!-- md padding on top, bottom, and right; zero on left -->
<div class="p-md pl-0">...</div>Loading components…
<div class="flex flex-wrap items-start gap-md"> <div class="bg-muted rounded-md p-md"> <div class="grid place-items-center bg-primary text-primary-foreground rounded-sm p-sm text-xs font-strong aspect-square" > p-md </div> </div> <div class="bg-muted rounded-md p-md pl-0"> <div class="grid place-items-center bg-primary text-primary-foreground rounded-sm p-sm text-xs font-strong aspect-square" > p-md pl-0 </div> </div> <div class="bg-muted rounded-md p-md py-xs"> <div class="grid place-items-center bg-primary text-primary-foreground rounded-sm p-sm text-xs font-strong aspect-square" > p-md py-xs </div> </div></div>| Variable | Syntax | Initial | Set by |
|---|---|---|---|
--_padding-inline-start, --_padding-inline-end | <length-percentage> | 0 | p-*, px-*, pl-*, pr-* |
--_padding-block-start, --_padding-block-end | <length-percentage> | 0 | p-*, py-*, pt-*, pb-* |
--_margin-inline-start, --_margin-inline-end | <length-percentage> | auto | 0 | m-*, mx-*, ml-*, mr-*, -m-*, mx-auto |
--_margin-block-start, --_margin-block-end | <length-percentage> | auto | 0 | m-*, my-*, mt-*, mb-*, -m-*, my-auto |