Utility index
The complete, generated list of every fluidity utility — all 279 @utility rules, grouped by property and curve. Regenerated from index.css.
Every fluidity class, grouped the same way as Utilities. This page is generated directly from index.css by scripts/build-docs-reference.mjs — it can’t drift from what actually ships, because it’s built from the same file Tailwind compiles. Regenerate it with npm run docs:reference after npm run build.
88 base utilities × 3 curves (linear, exp-, log-) = 264 utility classes, plus 15 configuration utilities — 279 @utility rules in total.
Every <min>[/<max>] follows the value syntax for its property’s kind — see Utilities for what each kind accepts, or How it works for the value-form table (pair, arbitrary, mixed, min-only, bare).
Padding
Fluid padding on every edge and logical axis.
| Linear | Exponential | Logarithmic | CSS property |
|---|---|---|---|
f6y-p-<min>[/<max>] |
f6y-exp-p-<min>[/<max>] |
f6y-log-p-<min>[/<max>] |
padding |
f6y-px-<min>[/<max>] |
f6y-exp-px-<min>[/<max>] |
f6y-log-px-<min>[/<max>] |
padding-inline |
f6y-py-<min>[/<max>] |
f6y-exp-py-<min>[/<max>] |
f6y-log-py-<min>[/<max>] |
padding-block |
f6y-ps-<min>[/<max>] |
f6y-exp-ps-<min>[/<max>] |
f6y-log-ps-<min>[/<max>] |
padding-inline-start |
f6y-pe-<min>[/<max>] |
f6y-exp-pe-<min>[/<max>] |
f6y-log-pe-<min>[/<max>] |
padding-inline-end |
f6y-pt-<min>[/<max>] |
f6y-exp-pt-<min>[/<max>] |
f6y-log-pt-<min>[/<max>] |
padding-top |
f6y-pr-<min>[/<max>] |
f6y-exp-pr-<min>[/<max>] |
f6y-log-pr-<min>[/<max>] |
padding-right |
f6y-pb-<min>[/<max>] |
f6y-exp-pb-<min>[/<max>] |
f6y-log-pb-<min>[/<max>] |
padding-bottom |
f6y-pl-<min>[/<max>] |
f6y-exp-pl-<min>[/<max>] |
f6y-log-pl-<min>[/<max>] |
padding-left |
Margin
Fluid margin on every edge and logical axis.
| Linear | Exponential | Logarithmic | CSS property |
|---|---|---|---|
f6y-m-<min>[/<max>] |
f6y-exp-m-<min>[/<max>] |
f6y-log-m-<min>[/<max>] |
margin |
f6y-mx-<min>[/<max>] |
f6y-exp-mx-<min>[/<max>] |
f6y-log-mx-<min>[/<max>] |
margin-inline |
f6y-my-<min>[/<max>] |
f6y-exp-my-<min>[/<max>] |
f6y-log-my-<min>[/<max>] |
margin-block |
f6y-ms-<min>[/<max>] |
f6y-exp-ms-<min>[/<max>] |
f6y-log-ms-<min>[/<max>] |
margin-inline-start |
f6y-me-<min>[/<max>] |
f6y-exp-me-<min>[/<max>] |
f6y-log-me-<min>[/<max>] |
margin-inline-end |
f6y-mt-<min>[/<max>] |
f6y-exp-mt-<min>[/<max>] |
f6y-log-mt-<min>[/<max>] |
margin-top |
f6y-mr-<min>[/<max>] |
f6y-exp-mr-<min>[/<max>] |
f6y-log-mr-<min>[/<max>] |
margin-right |
f6y-mb-<min>[/<max>] |
f6y-exp-mb-<min>[/<max>] |
f6y-log-mb-<min>[/<max>] |
margin-bottom |
f6y-ml-<min>[/<max>] |
f6y-exp-ml-<min>[/<max>] |
f6y-log-ml-<min>[/<max>] |
margin-left |
Gap
Fluid grid and flex gutters.
| Linear | Exponential | Logarithmic | CSS property |
|---|---|---|---|
f6y-gap-<min>[/<max>] |
f6y-exp-gap-<min>[/<max>] |
f6y-log-gap-<min>[/<max>] |
gap |
f6y-gap-x-<min>[/<max>] |
f6y-exp-gap-x-<min>[/<max>] |
f6y-log-gap-x-<min>[/<max>] |
column-gap |
f6y-gap-y-<min>[/<max>] |
f6y-exp-gap-y-<min>[/<max>] |
f6y-log-gap-y-<min>[/<max>] |
row-gap |
Space between
Fluid spacing between direct children. Applies to every child except the last; no reverse variant.
| Linear | Exponential | Logarithmic | CSS property |
|---|---|---|---|
f6y-space-x-<min>[/<max>] |
f6y-exp-space-x-<min>[/<max>] |
f6y-log-space-x-<min>[/<max>] |
margin-inline-end |
f6y-space-y-<min>[/<max>] |
f6y-exp-space-y-<min>[/<max>] |
f6y-log-space-y-<min>[/<max>] |
margin-block-end |
Position
Fluid offsets for positioned elements.
| Linear | Exponential | Logarithmic | CSS property |
|---|---|---|---|
f6y-inset-<min>[/<max>] |
f6y-exp-inset-<min>[/<max>] |
f6y-log-inset-<min>[/<max>] |
inset |
f6y-inset-x-<min>[/<max>] |
f6y-exp-inset-x-<min>[/<max>] |
f6y-log-inset-x-<min>[/<max>] |
inset-inline |
f6y-inset-y-<min>[/<max>] |
f6y-exp-inset-y-<min>[/<max>] |
f6y-log-inset-y-<min>[/<max>] |
inset-block |
f6y-start-<min>[/<max>] |
f6y-exp-start-<min>[/<max>] |
f6y-log-start-<min>[/<max>] |
inset-inline-start |
f6y-end-<min>[/<max>] |
f6y-exp-end-<min>[/<max>] |
f6y-log-end-<min>[/<max>] |
inset-inline-end |
f6y-top-<min>[/<max>] |
f6y-exp-top-<min>[/<max>] |
f6y-log-top-<min>[/<max>] |
top |
f6y-right-<min>[/<max>] |
f6y-exp-right-<min>[/<max>] |
f6y-log-right-<min>[/<max>] |
right |
f6y-bottom-<min>[/<max>] |
f6y-exp-bottom-<min>[/<max>] |
f6y-log-bottom-<min>[/<max>] |
bottom |
f6y-left-<min>[/<max>] |
f6y-exp-left-<min>[/<max>] |
f6y-log-left-<min>[/<max>] |
left |
Scroll margin
Fluid scroll snap/anchor margins.
| Linear | Exponential | Logarithmic | CSS property |
|---|---|---|---|
f6y-scroll-m-<min>[/<max>] |
f6y-exp-scroll-m-<min>[/<max>] |
f6y-log-scroll-m-<min>[/<max>] |
scroll-margin |
f6y-scroll-mx-<min>[/<max>] |
f6y-exp-scroll-mx-<min>[/<max>] |
f6y-log-scroll-mx-<min>[/<max>] |
scroll-margin-inline |
f6y-scroll-my-<min>[/<max>] |
f6y-exp-scroll-my-<min>[/<max>] |
f6y-log-scroll-my-<min>[/<max>] |
scroll-margin-block |
f6y-scroll-ms-<min>[/<max>] |
f6y-exp-scroll-ms-<min>[/<max>] |
f6y-log-scroll-ms-<min>[/<max>] |
scroll-margin-inline-start |
f6y-scroll-me-<min>[/<max>] |
f6y-exp-scroll-me-<min>[/<max>] |
f6y-log-scroll-me-<min>[/<max>] |
scroll-margin-inline-end |
f6y-scroll-mt-<min>[/<max>] |
f6y-exp-scroll-mt-<min>[/<max>] |
f6y-log-scroll-mt-<min>[/<max>] |
scroll-margin-top |
f6y-scroll-mr-<min>[/<max>] |
f6y-exp-scroll-mr-<min>[/<max>] |
f6y-log-scroll-mr-<min>[/<max>] |
scroll-margin-right |
f6y-scroll-mb-<min>[/<max>] |
f6y-exp-scroll-mb-<min>[/<max>] |
f6y-log-scroll-mb-<min>[/<max>] |
scroll-margin-bottom |
f6y-scroll-ml-<min>[/<max>] |
f6y-exp-scroll-ml-<min>[/<max>] |
f6y-log-scroll-ml-<min>[/<max>] |
scroll-margin-left |
Scroll padding
Fluid scroll snap/anchor padding.
| Linear | Exponential | Logarithmic | CSS property |
|---|---|---|---|
f6y-scroll-p-<min>[/<max>] |
f6y-exp-scroll-p-<min>[/<max>] |
f6y-log-scroll-p-<min>[/<max>] |
scroll-padding |
f6y-scroll-px-<min>[/<max>] |
f6y-exp-scroll-px-<min>[/<max>] |
f6y-log-scroll-px-<min>[/<max>] |
scroll-padding-inline |
f6y-scroll-py-<min>[/<max>] |
f6y-exp-scroll-py-<min>[/<max>] |
f6y-log-scroll-py-<min>[/<max>] |
scroll-padding-block |
f6y-scroll-ps-<min>[/<max>] |
f6y-exp-scroll-ps-<min>[/<max>] |
f6y-log-scroll-ps-<min>[/<max>] |
scroll-padding-inline-start |
f6y-scroll-pe-<min>[/<max>] |
f6y-exp-scroll-pe-<min>[/<max>] |
f6y-log-scroll-pe-<min>[/<max>] |
scroll-padding-inline-end |
f6y-scroll-pt-<min>[/<max>] |
f6y-exp-scroll-pt-<min>[/<max>] |
f6y-log-scroll-pt-<min>[/<max>] |
scroll-padding-top |
f6y-scroll-pr-<min>[/<max>] |
f6y-exp-scroll-pr-<min>[/<max>] |
f6y-log-scroll-pr-<min>[/<max>] |
scroll-padding-right |
f6y-scroll-pb-<min>[/<max>] |
f6y-exp-scroll-pb-<min>[/<max>] |
f6y-log-scroll-pb-<min>[/<max>] |
scroll-padding-bottom |
f6y-scroll-pl-<min>[/<max>] |
f6y-exp-scroll-pl-<min>[/<max>] |
f6y-log-scroll-pl-<min>[/<max>] |
scroll-padding-left |
Sizing
Fluid box dimensions and flex basis.
| Linear | Exponential | Logarithmic | CSS properties |
|---|---|---|---|
f6y-w-<min>[/<max>] |
f6y-exp-w-<min>[/<max>] |
f6y-log-w-<min>[/<max>] |
width |
f6y-h-<min>[/<max>] |
f6y-exp-h-<min>[/<max>] |
f6y-log-h-<min>[/<max>] |
height |
f6y-size-<min>[/<max>] |
f6y-exp-size-<min>[/<max>] |
f6y-log-size-<min>[/<max>] |
width, height |
f6y-min-w-<min>[/<max>] |
f6y-exp-min-w-<min>[/<max>] |
f6y-log-min-w-<min>[/<max>] |
min-width |
f6y-min-h-<min>[/<max>] |
f6y-exp-min-h-<min>[/<max>] |
f6y-log-min-h-<min>[/<max>] |
min-height |
f6y-max-w-<min>[/<max>] |
f6y-exp-max-w-<min>[/<max>] |
f6y-log-max-w-<min>[/<max>] |
max-width |
f6y-max-h-<min>[/<max>] |
f6y-exp-max-h-<min>[/<max>] |
f6y-log-max-h-<min>[/<max>] |
max-height |
f6y-basis-<min>[/<max>] |
f6y-exp-basis-<min>[/<max>] |
f6y-log-basis-<min>[/<max>] |
flex-basis |
Typography
Fluid type scale, leading, tracking and indent.
| Linear | Exponential | Logarithmic | CSS property |
|---|---|---|---|
f6y-text-<min>[/<max>] |
f6y-exp-text-<min>[/<max>] |
f6y-log-text-<min>[/<max>] |
font-size |
f6y-leading-<min>[/<max>] |
f6y-exp-leading-<min>[/<max>] |
f6y-log-leading-<min>[/<max>] |
line-height |
f6y-tracking-<min>[/<max>] |
f6y-exp-tracking-<min>[/<max>] |
f6y-log-tracking-<min>[/<max>] |
letter-spacing |
f6y-indent-<min>[/<max>] |
f6y-exp-indent-<min>[/<max>] |
f6y-log-indent-<min>[/<max>] |
text-indent |
Border radius
Fluid corner rounding.
| Linear | Exponential | Logarithmic | CSS properties |
|---|---|---|---|
f6y-rounded-<min>[/<max>] |
f6y-exp-rounded-<min>[/<max>] |
f6y-log-rounded-<min>[/<max>] |
border-radius |
f6y-rounded-t-<min>[/<max>] |
f6y-exp-rounded-t-<min>[/<max>] |
f6y-log-rounded-t-<min>[/<max>] |
border-top-left-radius, border-top-right-radius |
f6y-rounded-r-<min>[/<max>] |
f6y-exp-rounded-r-<min>[/<max>] |
f6y-log-rounded-r-<min>[/<max>] |
border-top-right-radius, border-bottom-right-radius |
f6y-rounded-b-<min>[/<max>] |
f6y-exp-rounded-b-<min>[/<max>] |
f6y-log-rounded-b-<min>[/<max>] |
border-bottom-right-radius, border-bottom-left-radius |
f6y-rounded-l-<min>[/<max>] |
f6y-exp-rounded-l-<min>[/<max>] |
f6y-log-rounded-l-<min>[/<max>] |
border-top-left-radius, border-bottom-left-radius |
f6y-rounded-s-<min>[/<max>] |
f6y-exp-rounded-s-<min>[/<max>] |
f6y-log-rounded-s-<min>[/<max>] |
border-start-start-radius, border-end-start-radius |
f6y-rounded-e-<min>[/<max>] |
f6y-exp-rounded-e-<min>[/<max>] |
f6y-log-rounded-e-<min>[/<max>] |
border-start-end-radius, border-end-end-radius |
f6y-rounded-tl-<min>[/<max>] |
f6y-exp-rounded-tl-<min>[/<max>] |
f6y-log-rounded-tl-<min>[/<max>] |
border-top-left-radius |
f6y-rounded-tr-<min>[/<max>] |
f6y-exp-rounded-tr-<min>[/<max>] |
f6y-log-rounded-tr-<min>[/<max>] |
border-top-right-radius |
f6y-rounded-br-<min>[/<max>] |
f6y-exp-rounded-br-<min>[/<max>] |
f6y-log-rounded-br-<min>[/<max>] |
border-bottom-right-radius |
f6y-rounded-bl-<min>[/<max>] |
f6y-exp-rounded-bl-<min>[/<max>] |
f6y-log-rounded-bl-<min>[/<max>] |
border-bottom-left-radius |
f6y-rounded-ss-<min>[/<max>] |
f6y-exp-rounded-ss-<min>[/<max>] |
f6y-log-rounded-ss-<min>[/<max>] |
border-start-start-radius |
f6y-rounded-se-<min>[/<max>] |
f6y-exp-rounded-se-<min>[/<max>] |
f6y-log-rounded-se-<min>[/<max>] |
border-start-end-radius |
f6y-rounded-es-<min>[/<max>] |
f6y-exp-rounded-es-<min>[/<max>] |
f6y-log-rounded-es-<min>[/<max>] |
border-end-start-radius |
f6y-rounded-ee-<min>[/<max>] |
f6y-exp-rounded-ee-<min>[/<max>] |
f6y-log-rounded-ee-<min>[/<max>] |
border-end-end-radius |
Border and outline width
Fluid border, outline and outline offset widths.
| Linear | Exponential | Logarithmic | CSS property |
|---|---|---|---|
f6y-border-<min>[/<max>] |
f6y-exp-border-<min>[/<max>] |
f6y-log-border-<min>[/<max>] |
border-width |
f6y-border-x-<min>[/<max>] |
f6y-exp-border-x-<min>[/<max>] |
f6y-log-border-x-<min>[/<max>] |
border-inline-width |
f6y-border-y-<min>[/<max>] |
f6y-exp-border-y-<min>[/<max>] |
f6y-log-border-y-<min>[/<max>] |
border-block-width |
f6y-border-s-<min>[/<max>] |
f6y-exp-border-s-<min>[/<max>] |
f6y-log-border-s-<min>[/<max>] |
border-inline-start-width |
f6y-border-e-<min>[/<max>] |
f6y-exp-border-e-<min>[/<max>] |
f6y-log-border-e-<min>[/<max>] |
border-inline-end-width |
f6y-border-t-<min>[/<max>] |
f6y-exp-border-t-<min>[/<max>] |
f6y-log-border-t-<min>[/<max>] |
border-top-width |
f6y-border-r-<min>[/<max>] |
f6y-exp-border-r-<min>[/<max>] |
f6y-log-border-r-<min>[/<max>] |
border-right-width |
f6y-border-b-<min>[/<max>] |
f6y-exp-border-b-<min>[/<max>] |
f6y-log-border-b-<min>[/<max>] |
border-bottom-width |
f6y-border-l-<min>[/<max>] |
f6y-exp-border-l-<min>[/<max>] |
f6y-log-border-l-<min>[/<max>] |
border-left-width |
f6y-outline-<min>[/<max>] |
f6y-exp-outline-<min>[/<max>] |
f6y-log-outline-<min>[/<max>] |
outline-width |
f6y-outline-offset-<min>[/<max>] |
f6y-exp-outline-offset-<min>[/<max>] |
f6y-log-outline-offset-<min>[/<max>] |
outline-offset |