API
From CSS to Zazz
Every CSS property the utilities write, looked up by the property.
Utilities are named after Tailwind's classes, so align-items is --items and border-radius is --rounded. If you know the property and not the class, find it here. Physical names (width, padding-left) are listed too: the kit writes the logical property, so --pl pads the inline start, which is the right side in a right-to-left document.
A value is written the way the property takes it (--justify: space-between, --w: 100%). Spacing, margin, and sizing utilities also take a bare number as a step on the spacing scale, and a few utilities take a token by name; the utilities overview has the value rules.
| CSS property | Utility | Value |
|---|---|---|
-webkit-line-clamp | --line-clamp | line count (1 truncates) |
align-items | --items | keyword |
align-self | --self | keyword |
anchor-name | --anchor-name | dashed ident (--toolbar), a list of them, or none |
aspect-ratio | --aspect | any CSS value |
background-color | --bg | color, or none (clears the color and any gradient) |
background-image | --bg-linear, --bg-radial, --bg-conic, --bg-stops | a gradient: the type carries the prelude, --bg-stops the color stops; --bg: none clears it |
block-size | --h, --size | scale number or length |
border | --border | a color (1px solid), a number (px wide in --color-border), or a length |
border-block-end | --border-b | a color, a number (px), or a length |
border-block-start | --border-t | a color, a number (px), or a length |
border-bottom | --border-b | a color, a number (px), or a length; writes border-block-end, so it follows the writing direction |
border-color | --border-color | any CSS value |
border-inline | --border-x | a color, a number (px), or a length; --border-y, --border-t, --border-r, --border-b, --border-l for the other sides |
border-inline-end | --border-r | a color, a number (px), or a length |
border-inline-start | --border-l | a color, a number (px), or a length |
border-left | --border-l | a color, a number (px), or a length; writes border-inline-start, so it follows the writing direction |
border-radius | --rounded | any CSS value |
border-right | --border-r | a color, a number (px), or a length; writes border-inline-end, so it follows the writing direction |
border-style | --border-style | any CSS value |
border-top | --border-t | a color, a number (px), or a length; writes border-block-start, so it follows the writing direction |
border-width | --border-width | any CSS value |
bottom | --bottom | scale number or length; writes inset-block-end, so it follows the writing direction |
box-shadow | --shadow, --ring, --ring-color, --ring-offset, --ring-offset-color | one box-shadow: the shadow (by name, 2xs to 2xl, or any value) and the ring |
color | --text | any CSS value |
column-gap | --gap-x | scale number or length |
cursor | --cursor | keyword |
display | --display | keyword, plus flex shorthands that set the direction: flex-row, flex-row-reverse, flex-col, flex-col-reverse, inline-flex-row, inline-flex-row-reverse, inline-flex-col, inline-flex-col-reverse |
flex | --flex | any CSS value |
flex-basis | --basis | any CSS value |
flex-direction | --display: flex-row, --display: flex-row-reverse, --display: flex-col, --display: flex-col-reverse, --display: inline-flex-row, --display: inline-flex-row-reverse, --display: inline-flex-col, --display: inline-flex-col-reverse | the direction rides on --display; a plain flex at a tier resets it to row |
flex-shrink | --shrink | any CSS value |
flex-wrap | --flex-wrap | keyword |
font-family | --font-family | any CSS value |
font-size | --font-size | any CSS value |
font-style | --font-style | keyword |
font-weight | --font-weight | number, or strong / heading / body (the role weight tokens) |
gap | --gap | scale number or length |
grid-auto-columns | --auto-cols | any CSS value |
grid-auto-flow | --grid-flow | keyword |
grid-auto-rows | --auto-rows | any CSS value |
grid-column | --band, --col-span | any CSS value |
grid-column-end | --col-end | any CSS value |
grid-column-start | --col-start | any CSS value |
grid-row | --row-span | span count |
grid-row-end | --row-end | any CSS value |
grid-row-start | --row-start | any CSS value |
grid-template-columns | --grid-cols, --template-cols, --grid-fit | track count (equal tracks) or subgrid |
grid-template-rows | --grid-rows, --template-rows | track count (equal tracks) or subgrid |
height | --h, --size | scale number or length; writes block-size, so it follows the writing direction |
inline-size | --w, --size | scale number or length |
inset | --inset | scale number or length |
inset-block | --inset-y | scale number or length |
inset-block-end | --bottom | scale number or length |
inset-block-start | --top | scale number or length |
inset-inline | --inset-x | scale number or length |
inset-inline-end | --right | scale number or length |
inset-inline-start | --left | scale number or length |
justify-content | --justify | keyword |
left | --left | scale number or length; writes inset-inline-start, so it follows the writing direction |
letter-spacing | --tracking | any CSS value |
line-height | --leading | any CSS value |
margin | --m | scale number or length |
margin-block | --my | scale number or length |
margin-block-end | --mb | scale number or length |
margin-block-start | --mt | scale number or length |
margin-bottom | --mb | scale number or length; writes margin-block-end, so it follows the writing direction |
margin-inline | --mx | scale number or length |
margin-inline-end | --mr | scale number or length |
margin-inline-start | --ml | scale number or length |
margin-left | --ml | scale number or length; writes margin-inline-start, so it follows the writing direction |
margin-right | --mr | scale number or length; writes margin-inline-end, so it follows the writing direction |
margin-top | --mt | scale number or length; writes margin-block-start, so it follows the writing direction |
max-block-size | --max-h | scale number or length |
max-height | --max-h | scale number or length; writes max-block-size, so it follows the writing direction |
max-inline-size | --max-w | scale number or length |
max-width | --max-w | scale number or length; writes max-inline-size, so it follows the writing direction |
min-block-size | --min-h | scale number or length |
min-height | --min-h | scale number or length; writes min-block-size, so it follows the writing direction |
min-inline-size | --min-w | scale number or length |
min-width | --min-w | scale number or length; writes min-inline-size, so it follows the writing direction |
object-fit | --object-fit | keyword |
object-position | --object-position | any CSS value |
opacity | --opacity | any CSS value |
order | --order | any CSS value |
outline | --outline | any CSS value |
outline (focus) | --focus-ring | a primitive's focus ring and a plain element's focus outline: a signed width, negative keeps it inside |
overflow | --overflow | keyword |
overflow-x | --overflow-x | keyword |
overflow-y | --overflow-y | keyword |
padding | --p | scale number or length |
padding-block | --py | scale number or length |
padding-block-end | --pb | scale number or length |
padding-block-start | --pt | scale number or length |
padding-bottom | --pb | scale number or length; writes padding-block-end, so it follows the writing direction |
padding-inline | --px | scale number or length |
padding-inline-end | --pr | scale number or length |
padding-inline-start | --pl | scale number or length |
padding-left | --pl | scale number or length; writes padding-inline-start, so it follows the writing direction |
padding-right | --pr | scale number or length; writes padding-inline-end, so it follows the writing direction |
padding-top | --pt | scale number or length; writes padding-block-start, so it follows the writing direction |
place-content | --place-content | alignment keyword (center, start, end, space-between, safe end, …) |
place-items | --place-items | alignment keyword (center, start, end, stretch, safe end, …) |
pointer-events | --pointer-events | keyword |
position | --position | keyword |
position-anchor | --position-anchor | dashed ident naming an anchor, auto, none, or normal |
position-area | --position-area | one or two area keywords (block-start span-inline-end), or none |
right | --right | scale number or length; writes inset-inline-end, so it follows the writing direction |
rotate | --rotate | any CSS value |
row-gap | --gap-y | scale number or length |
scale | --scale | any CSS value |
text-align | --text-align | keyword |
text-decoration-line | --text-decoration | any CSS value |
text-transform | --text-transform | keyword |
text-wrap | --text-wrap | keyword |
top | --top | scale number or length; writes inset-block-start, so it follows the writing direction |
transition | --transition | any CSS value |
transition-delay | --transition-delay | any CSS value |
transition-duration | --transition-duration | any CSS value |
translate | --translate | any CSS value |
visibility | --visibility | keyword |
white-space | --whitespace | keyword |
width | --w, --size | scale number or length; writes inline-size, so it follows the writing direction |
z-index | --z | any CSS value |