---
title: Utility index
description: The complete, generated list of every fluidity utility — all 279 @utility rules, grouped by property and curve. Regenerated from index.css.
sidebar:
  label: Utility index
  order: 1
---

Every fluidity class, grouped the same way as [Utilities](/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](/reference/css-variables) — 279 `@utility` rules in total.

Every `<min>[/<max>]` follows the value syntax for its property's kind — see [Utilities](/utilities) for what each kind accepts, or [How it works](/concepts/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` |

:::note
Applies only to direct children, via `:where(& > :not(:last-child))` — every child but the last. There is no `-reverse` variant.
:::

## 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` |

## Next steps

**[CSS variables](/reference/css-variables)**

The 15 configuration utilities and the 5 custom properties they set.

**[Limitations](/reference/limitations)**

Browser support and what fluidity deliberately doesn't do.