Utilities
Direct values
Pass one static number to a length or numeric property.
On this page
Classes
| Class | Declarations |
|---|---|
m(<number>) | margin: calc(<number> * 1px); |
p(<number>) | padding: calc(<number> * 1px); |
gap(<number>) | gap: calc(<number> * 1px); |
w(<number>) | width: calc(<number> * 1px); |
h(<number>) | height: calc(<number> * 1px); |
r(<number>) | border-radius: calc(<number> * 1px); |
b(<number>) | border-width: calc(<number> * 1px); |
grow(<number>) | flex-grow: <number>; |
shrink(<number>) | flex-shrink: <number>; |
order(<integer>) | order: <integer>; |
90 more functions
| Class | Declarations |
|---|---|
mt(<number>) | margin-top: calc(<number> * 1px); |
mr(<number>) | margin-right: calc(<number> * 1px); |
mb(<number>) | margin-bottom: calc(<number> * 1px); |
ml(<number>) | margin-left: calc(<number> * 1px); |
mx(<number>) | margin-inline: calc(<number> * 1px); |
mxs(<number>) | margin-inline-start: calc(<number> * 1px); |
mxe(<number>) | margin-inline-end: calc(<number> * 1px); |
my(<number>) | margin-block: calc(<number> * 1px); |
mys(<number>) | margin-block-start: calc(<number> * 1px); |
mye(<number>) | margin-block-end: calc(<number> * 1px); |
pt(<number>) | padding-top: calc(<number> * 1px); |
pr(<number>) | padding-right: calc(<number> * 1px); |
pb(<number>) | padding-bottom: calc(<number> * 1px); |
pl(<number>) | padding-left: calc(<number> * 1px); |
px(<number>) | padding-inline: calc(<number> * 1px); |
pxs(<number>) | padding-inline-start: calc(<number> * 1px); |
pxe(<number>) | padding-inline-end: calc(<number> * 1px); |
py(<number>) | padding-block: calc(<number> * 1px); |
pys(<number>) | padding-block-start: calc(<number> * 1px); |
pye(<number>) | padding-block-end: calc(<number> * 1px); |
scroll-m(<number>) | scroll-margin: calc(<number> * 1px); |
scroll-mt(<number>) | scroll-margin-top: calc(<number> * 1px); |
scroll-mr(<number>) | scroll-margin-right: calc(<number> * 1px); |
scroll-mb(<number>) | scroll-margin-bottom: calc(<number> * 1px); |
scroll-ml(<number>) | scroll-margin-left: calc(<number> * 1px); |
scroll-mx(<number>) | scroll-margin-inline: calc(<number> * 1px); |
scroll-mxs(<number>) | scroll-margin-inline-start: calc(<number> * 1px); |
scroll-mxe(<number>) | scroll-margin-inline-end: calc(<number> * 1px); |
scroll-my(<number>) | scroll-margin-block: calc(<number> * 1px); |
scroll-mys(<number>) | scroll-margin-block-start: calc(<number> * 1px); |
scroll-mye(<number>) | scroll-margin-block-end: calc(<number> * 1px); |
scroll-p(<number>) | scroll-padding: calc(<number> * 1px); |
scroll-pt(<number>) | scroll-padding-top: calc(<number> * 1px); |
scroll-pr(<number>) | scroll-padding-right: calc(<number> * 1px); |
scroll-pb(<number>) | scroll-padding-bottom: calc(<number> * 1px); |
scroll-pl(<number>) | scroll-padding-left: calc(<number> * 1px); |
scroll-px(<number>) | scroll-padding-inline: calc(<number> * 1px); |
scroll-pxs(<number>) | scroll-padding-inline-start: calc(<number> * 1px); |
scroll-pxe(<number>) | scroll-padding-inline-end: calc(<number> * 1px); |
scroll-py(<number>) | scroll-padding-block: calc(<number> * 1px); |
scroll-pys(<number>) | scroll-padding-block-start: calc(<number> * 1px); |
scroll-pye(<number>) | scroll-padding-block-end: calc(<number> * 1px); |
top(<number>) | top: calc(<number> * 1px); |
right(<number>) | right: calc(<number> * 1px); |
bottom(<number>) | bottom: calc(<number> * 1px); |
left(<number>) | left: calc(<number> * 1px); |
inset(<number>) | inset: calc(<number> * 1px); |
ix(<number>) | inset-inline: calc(<number> * 1px); |
ixs(<number>) | inset-inline-start: calc(<number> * 1px); |
ixe(<number>) | inset-inline-end: calc(<number> * 1px); |
iy(<number>) | inset-block: calc(<number> * 1px); |
iys(<number>) | inset-block-start: calc(<number> * 1px); |
iye(<number>) | inset-block-end: calc(<number> * 1px); |
col-gap(<number>) | column-gap: calc(<number> * 1px); |
row-gap(<number>) | row-gap: calc(<number> * 1px); |
border-spacing(<number>) | border-spacing: calc(<number> * 1px); |
outline-offset(<number>) | outline-offset: calc(<number> * 1px); |
shape-margin(<number>) | shape-margin: calc(<number> * 1px); |
translate(<number>) | translate: calc(<number> * 1px); |
word-spacing(<number>) | word-spacing: calc(<number> * 1px); |
size-x(<number>) | inline-size: calc(<number> * 1px); |
size-y(<number>) | block-size: calc(<number> * 1px); |
min-w(<number>) | min-width: calc(<number> * 1px); |
min-h(<number>) | min-height: calc(<number> * 1px); |
min-size-x(<number>) | min-inline-size: calc(<number> * 1px); |
min-size-y(<number>) | min-block-size: calc(<number> * 1px); |
max-w(<number>) | max-width: calc(<number> * 1px); |
max-h(<number>) | max-height: calc(<number> * 1px); |
max-size-x(<number>) | max-inline-size: calc(<number> * 1px); |
max-size-y(<number>) | max-block-size: calc(<number> * 1px); |
basis(<number>) | flex-basis: calc(<number> * 1px); |
rtl(<number>) | border-top-left-radius: calc(<number> * 1px); |
rtr(<number>) | border-top-right-radius: calc(<number> * 1px); |
rbl(<number>) | border-bottom-left-radius: calc(<number> * 1px); |
rbr(<number>) | border-bottom-right-radius: calc(<number> * 1px); |
rss(<number>) | border-start-start-radius: calc(<number> * 1px); |
rse(<number>) | border-start-end-radius: calc(<number> * 1px); |
res(<number>) | border-end-start-radius: calc(<number> * 1px); |
ree(<number>) | border-end-end-radius: calc(<number> * 1px); |
bt(<number>) | border-top-width: calc(<number> * 1px); |
br(<number>) | border-right-width: calc(<number> * 1px); |
bb(<number>) | border-bottom-width: calc(<number> * 1px); |
bl(<number>) | border-left-width: calc(<number> * 1px); |
bx(<number>) | border-inline-width: calc(<number> * 1px); |
bxs(<number>) | border-inline-start-width: calc(<number> * 1px); |
bxe(<number>) | border-inline-end-width: calc(<number> * 1px); |
by(<number>) | border-block-width: calc(<number> * 1px); |
bys(<number>) | border-block-start-width: calc(<number> * 1px); |
bye(<number>) | border-block-end-width: calc(<number> * 1px); |
outline(<number>) | outline-width: calc(<number> * 1px); |
Length functions multiply the number by 1px; grow(), shrink() and order() pass it through. Write a native declaration such as (margin:1rem) for other units or dynamic values.
The property determines what the number means
p(12) writes padding: calc(12 * 1px), so the number is a pixel count. It is not a spacing-scale key or a multiplier of the theme’s spacing tokens. Decimal numbers such as p(1.5) are allowed.
Direct numbers become pixel lengths or unitless factors
The left number becomes a pixel length. The right numbers are flex factors: zero bases and no content minimum isolate their 1:2 distribution. Other bases and minimum sizes can change final widths.
Text description
- The padding example applies real p(12), giving exactly 12px between its content and each outer edge. A blue annotation makes that inset visible.
- The flex example applies grow(1) and grow(2) to two items with zero flex bases and zero minimum widths, in a 252px row with a 12px gap.
- The remaining 240px is distributed as 80px and 160px. The factors remain unitless; they are not pixel widths.
- These are controlled comparisons. With nonzero bases or content minimums, the final widths need not match the growth ratio. Each function’s declaration is listed in the article.
grow(1) and shrink(1) are unitless flex factors. Growth distributes remaining free space; the figure uses zero bases and no content minimum to isolate the 1:2 ratio. With other bases or minimum sizes, factors alone do not determine final widths. Shrink distribution also accounts for each item’s flex base size.
order() emits the number directly, but the CSS property requires an integer. Negative values remain subject to each property’s rules: m(-4) is a valid negative margin, while negative padding or a negative flex factor cannot request a negative used value.
Pass one static number only. Units, var() and arithmetic expressions belong in native declarations, such as (padding:var(--panel-space)). A named shared length belongs in a theme token such as p-card.
These functions set their listed declarations only. b(1) still needs a border style; top(4) needs positioning that accepts an inset; gap(12) needs a layout where gaps apply. The table keeps logical and physical properties distinct.
See Spacing tokens and native declarations and flex factors.
Usage
Set exact pixel lengths and let one box take the remaining space.
Fixed
Grows to fill
<div class="… flex flex-wrap gap(12)"> <div class="… p(12) r(10) b(1) b-solid">Fixed</div> <div class="… grow(1) p(12) r(10) b(1) b-dashed">Grows to fill</div></div>Generated CSS
@layer utilities { .r\(10\) { border-radius: calc(10 * 1px) } .b-dashed { border-style: dashed } .b-solid { border-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .flex { display: flex } .grow\(1\) { flex-grow: 1 } .flex-wrap { flex-wrap: wrap } .gap\(12\) { gap: calc(12 * 1px) } .p\(12\) { padding: calc(12 * 1px) }}Customize
The preset defines these classes with @utility. Define the same name in your stylesheet to replace it.
@utility m(--value <number>) { margin: calc(var(--value) * 1px);}All 100 definitions
@utility m(--value <number>) { margin: calc(var(--value) * 1px);}@utility mt(--value <number>) { margin-top: calc(var(--value) * 1px);}@utility mr(--value <number>) { margin-right: calc(var(--value) * 1px);}@utility mb(--value <number>) { margin-bottom: calc(var(--value) * 1px);}@utility ml(--value <number>) { margin-left: calc(var(--value) * 1px);}@utility mx(--value <number>) { margin-inline: calc(var(--value) * 1px);}@utility mxs(--value <number>) { margin-inline-start: calc(var(--value) * 1px);}@utility mxe(--value <number>) { margin-inline-end: calc(var(--value) * 1px);}@utility my(--value <number>) { margin-block: calc(var(--value) * 1px);}@utility mys(--value <number>) { margin-block-start: calc(var(--value) * 1px);}@utility mye(--value <number>) { margin-block-end: calc(var(--value) * 1px);}@utility p(--value <number>) { padding: calc(var(--value) * 1px);}@utility pt(--value <number>) { padding-top: calc(var(--value) * 1px);}@utility pr(--value <number>) { padding-right: calc(var(--value) * 1px);}@utility pb(--value <number>) { padding-bottom: calc(var(--value) * 1px);}@utility pl(--value <number>) { padding-left: calc(var(--value) * 1px);}@utility px(--value <number>) { padding-inline: calc(var(--value) * 1px);}@utility pxs(--value <number>) { padding-inline-start: calc(var(--value) * 1px);}@utility pxe(--value <number>) { padding-inline-end: calc(var(--value) * 1px);}@utility py(--value <number>) { padding-block: calc(var(--value) * 1px);}@utility pys(--value <number>) { padding-block-start: calc(var(--value) * 1px);}@utility pye(--value <number>) { padding-block-end: calc(var(--value) * 1px);}@utility scroll-m(--value <number>) { scroll-margin: calc(var(--value) * 1px);}@utility scroll-mt(--value <number>) { scroll-margin-top: calc(var(--value) * 1px);}@utility scroll-mr(--value <number>) { scroll-margin-right: calc(var(--value) * 1px);}@utility scroll-mb(--value <number>) { scroll-margin-bottom: calc(var(--value) * 1px);}@utility scroll-ml(--value <number>) { scroll-margin-left: calc(var(--value) * 1px);}@utility scroll-mx(--value <number>) { scroll-margin-inline: calc(var(--value) * 1px);}@utility scroll-mxs(--value <number>) { scroll-margin-inline-start: calc(var(--value) * 1px);}@utility scroll-mxe(--value <number>) { scroll-margin-inline-end: calc(var(--value) * 1px);}@utility scroll-my(--value <number>) { scroll-margin-block: calc(var(--value) * 1px);}@utility scroll-mys(--value <number>) { scroll-margin-block-start: calc(var(--value) * 1px);}@utility scroll-mye(--value <number>) { scroll-margin-block-end: calc(var(--value) * 1px);}@utility scroll-p(--value <number>) { scroll-padding: calc(var(--value) * 1px);}@utility scroll-pt(--value <number>) { scroll-padding-top: calc(var(--value) * 1px);}@utility scroll-pr(--value <number>) { scroll-padding-right: calc(var(--value) * 1px);}@utility scroll-pb(--value <number>) { scroll-padding-bottom: calc(var(--value) * 1px);}@utility scroll-pl(--value <number>) { scroll-padding-left: calc(var(--value) * 1px);}@utility scroll-px(--value <number>) { scroll-padding-inline: calc(var(--value) * 1px);}@utility scroll-pxs(--value <number>) { scroll-padding-inline-start: calc(var(--value) * 1px);}@utility scroll-pxe(--value <number>) { scroll-padding-inline-end: calc(var(--value) * 1px);}@utility scroll-py(--value <number>) { scroll-padding-block: calc(var(--value) * 1px);}@utility scroll-pys(--value <number>) { scroll-padding-block-start: calc(var(--value) * 1px);}@utility scroll-pye(--value <number>) { scroll-padding-block-end: calc(var(--value) * 1px);}@utility top(--value <number>) { top: calc(var(--value) * 1px);}@utility right(--value <number>) { right: calc(var(--value) * 1px);}@utility bottom(--value <number>) { bottom: calc(var(--value) * 1px);}@utility left(--value <number>) { left: calc(var(--value) * 1px);}@utility inset(--value <number>) { inset: calc(var(--value) * 1px);}@utility ix(--value <number>) { inset-inline: calc(var(--value) * 1px);}@utility ixs(--value <number>) { inset-inline-start: calc(var(--value) * 1px);}@utility ixe(--value <number>) { inset-inline-end: calc(var(--value) * 1px);}@utility iy(--value <number>) { inset-block: calc(var(--value) * 1px);}@utility iys(--value <number>) { inset-block-start: calc(var(--value) * 1px);}@utility iye(--value <number>) { inset-block-end: calc(var(--value) * 1px);}@utility gap(--value <number>) { gap: calc(var(--value) * 1px);}@utility col-gap(--value <number>) { column-gap: calc(var(--value) * 1px);}@utility row-gap(--value <number>) { row-gap: calc(var(--value) * 1px);}@utility border-spacing(--value <number>) { border-spacing: calc(var(--value) * 1px);}@utility outline-offset(--value <number>) { outline-offset: calc(var(--value) * 1px);}@utility shape-margin(--value <number>) { shape-margin: calc(var(--value) * 1px);}@utility translate(--value <number>) { translate: calc(var(--value) * 1px);}@utility word-spacing(--value <number>) { word-spacing: calc(var(--value) * 1px);}@utility w(--value <number>) { width: calc(var(--value) * 1px);}@utility h(--value <number>) { height: calc(var(--value) * 1px);}@utility size-x(--value <number>) { inline-size: calc(var(--value) * 1px);}@utility size-y(--value <number>) { block-size: calc(var(--value) * 1px);}@utility min-w(--value <number>) { min-width: calc(var(--value) * 1px);}@utility min-h(--value <number>) { min-height: calc(var(--value) * 1px);}@utility min-size-x(--value <number>) { min-inline-size: calc(var(--value) * 1px);}@utility min-size-y(--value <number>) { min-block-size: calc(var(--value) * 1px);}@utility max-w(--value <number>) { max-width: calc(var(--value) * 1px);}@utility max-h(--value <number>) { max-height: calc(var(--value) * 1px);}@utility max-size-x(--value <number>) { max-inline-size: calc(var(--value) * 1px);}@utility max-size-y(--value <number>) { max-block-size: calc(var(--value) * 1px);}@utility basis(--value <number>) { flex-basis: calc(var(--value) * 1px);}@utility r(--value <number>) { border-radius: calc(var(--value) * 1px);}@utility rtl(--value <number>) { border-top-left-radius: calc(var(--value) * 1px);}@utility rtr(--value <number>) { border-top-right-radius: calc(var(--value) * 1px);}@utility rbl(--value <number>) { border-bottom-left-radius: calc(var(--value) * 1px);}@utility rbr(--value <number>) { border-bottom-right-radius: calc(var(--value) * 1px);}@utility rss(--value <number>) { border-start-start-radius: calc(var(--value) * 1px);}@utility rse(--value <number>) { border-start-end-radius: calc(var(--value) * 1px);}@utility res(--value <number>) { border-end-start-radius: calc(var(--value) * 1px);}@utility ree(--value <number>) { border-end-end-radius: calc(var(--value) * 1px);}@utility b(--value <number>) { border-width: calc(var(--value) * 1px);}@utility bt(--value <number>) { border-top-width: calc(var(--value) * 1px);}@utility br(--value <number>) { border-right-width: calc(var(--value) * 1px);}@utility bb(--value <number>) { border-bottom-width: calc(var(--value) * 1px);}@utility bl(--value <number>) { border-left-width: calc(var(--value) * 1px);}@utility bx(--value <number>) { border-inline-width: calc(var(--value) * 1px);}@utility bxs(--value <number>) { border-inline-start-width: calc(var(--value) * 1px);}@utility bxe(--value <number>) { border-inline-end-width: calc(var(--value) * 1px);}@utility by(--value <number>) { border-block-width: calc(var(--value) * 1px);}@utility bys(--value <number>) { border-block-start-width: calc(var(--value) * 1px);}@utility bye(--value <number>) { border-block-end-width: calc(var(--value) * 1px);}@utility outline(--value <number>) { outline-width: calc(var(--value) * 1px);}@utility grow(--value <number>) { flex-grow: var(--value);}@utility shrink(--value <number>) { flex-shrink: var(--value);}@utility order(--value <integer>) { order: var(--value);}See utility definitions.