Utilities reference
Numeric values are pixels; named values resolve through tokens. Below is each utility family and the property it emits.
Spacing
| Utility | Property | Example |
|---|
p-* px-* py-* pt-* pr-* pb-* pl-* | padding | px-16 → padding-inline:16px |
m-* mx-* my-* mt-* mr-* mb-* ml-* | margin | m-auto → margin:auto |
gap-* gap-x-* gap-y-* | gap | gap-4 → gap:4px |
Sizing
| Utility | Property | Example |
|---|
w-* min-w-* max-w-* | width | w-full → width:100% |
h-* min-h-* max-h-* | height | h-screen → height:100vh |
Special values: full = 100%, screen = 100vw/100vh, auto = auto.
Colors
| Utility | Property | Example |
|---|
bg-* | background | bg-surface |
text-* (token) | color | text-accent |
border-* (token) | border-color | border-line |
text-* handles both color and font-size: size tokens are checked first, then numeric → font-size, then color. Color algebra (+12, -20, /22) is covered in Writing styles.
Typography
| Utility | Output |
|---|
text-16 | font-size:16px |
font-* (token) | font-family:var(--font-*) |
font-bold/semibold/medium/normal/light | font-weight |
leading-* | line-height |
tracking-* | letter-spacing |
text-left/center/right | text-align |
uppercase · no-underline · list-none | transform / decoration / list-style |
Layout
| Utility | Output |
|---|
flex · grid · block · inline-block · hidden | display |
direction-row/column · wrap · nowrap | flex-direction / flex-wrap |
align-center/start/end/stretch/baseline | align-items |
justify-center/between/start/end/around/evenly | justify-content |
place-center | place-items:center |
absolute · relative · fixed · sticky | position |
overflow-hidden/auto · overflow-x-auto · overflow-y-auto | overflow |
cursor-pointer · z-* | cursor / z-index |
Border
| Utility | Output |
|---|
border · border-2 · border-0 | border-width (+ solid style) |
border-t/b/l/r | one-side border |
border-solid/dashed/dotted/double/none | border-style |
rounded-* | border-radius:var(--radius-*) |
Grid
| Utility | Output |
|---|
cols-3 | grid-template-columns:repeat(3,1fr) |
cols-[200px_1fr] | grid-template-columns:200px 1fr |
rows-2 | grid-template-rows:repeat(2,1fr) |
Position / inset
top-*, right-*, bottom-*, left-*, inset-*, inset-x-*, inset-y-* - all accept numeric (px), token, or arbitrary values.
Effects
| Utility | Output |
|---|
scale-105 | transform:scale(1.05) |
opacity-75 | opacity:0.75 |
shadow-* | box-shadow (arbitrary value) |