Utilities

Every fluidity utility family, the value syntax they share, and how curve and variant support works across all.

Fluidity ships 279 @utility rules across 11 property groups, listed below. Every one of them follows the same three rules, so once you’ve used one you’ve used them all.

One value syntax, everywhere

Every fluid utility is f6y-<curve-ns><name>-<min>[/<max>], and <min>[/<max>] accepts the same shapes Tailwind’s own utilities do: spacing-scale numbers, theme keys, or arbitrary values, mixed in any combination. What differs between property groups is only which kind of value the bounds resolve through:

Whatever the kind, the same five value forms are always available:

<div class="f6y-p-2/8"></div>          <!-- pair: both bounds from the scale -->
<div class="f6y-p-[1rem]/[3rem]"></div> <!-- arbitrary: both bounds bracketed -->
<div class="f6y-p-2/[3rem]"></div>      <!-- mixed: one scale value, one arbitrary -->
<div class="f6y-p-2"></div>             <!-- min only: max = min * var(--f6y-ratio, 2) -->
<div class="f6y-p"></div>               <!-- bare: min falls back to the kind's default -->

See How it works for the derivation, or the utility index for every generated class.

Three curves, no exceptions

The 88 base utilities below each ship in linear (no prefix), exp-, and log- variants, yielding 264 classes. The curve namespace works identically everywhere, so variants don’t need separate documentation. See Curves.

Any Tailwind variant

Because every fluidity class compiles to an ordinary @utility rule, Tailwind’s variant system treats it exactly like a built-in utility:

<div class="md:f6y-p-8/32 hover:f6y-gap-2/8 dark:f6y-p-4"></div>

See Combining with Tailwind variants for worked recipes.

Property groups