Quickstart

Install fluidity, import it after Tailwind CSS, and ship your first fluid utility, a padding value that scales continuously with the viewport.

Fluidity needs Tailwind CSS v4. There’s no config file, no build step of its own, and no JavaScript. It’s a stylesheet of @utility rules that Tailwind compiles like any other utility.

Install and import

Install fluidity

npm install fluidity-tailwind

pnpm add fluidity-tailwind

yarn add fluidity-tailwind

bun add fluidity-tailwind

Import it after Tailwind

Fluidity’s utilities are ordinary Tailwind @utility rules, so they need Tailwind’s @import "tailwindcss" to run first. This defines --value(), --modifier(), and the theme (--spacing(), --text-*, --breakpoint-*) that fluidity’s utilities read from.

@import "tailwindcss";
@import "fluidity";

Use a fluid utility

Any f6y-* class works anywhere a normal Tailwind utility does, on any element, with any variant.

<div class="f6y-p-2/8">
  Padding ramps from 0.5rem to 2rem as the viewport grows.
</div>

See it move

Every fluid utility reads --f6y-axis (defaults to 100vw) to know where it’s along the ramp. Point it at this container instead of the viewport with f6y-axis-cqi, and configure a shorter range with f6y-lower-*/f6y-upper-* so the box below visibly changes size within the width of this page. Drag the bottom-right corner to resize it. No JavaScript, just CSS resize and container-type:

f6y-p-2/8

Drag to resize

<div class="@container">
  <div class="f6y-p-2/8 f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]">
    padding ramps 0.5rem -> 2rem as this container's inline size grows
  </div>
</div>

f6y-axis-cqi, f6y-lower-*, and f6y-upper-* are themselves fluidity utilities. They set --f6y-axis, --f6y-lower, and --f6y-upper custom properties that every fluid utility beneath them inherits. See Configuration for the full list.

Value syntax

<min>[/<max>] follows Tailwind’s own value syntax: spacing-scale numbers, theme keys, or arbitrary values.

<div class="f6y-p-2/8"></div>          <!-- spacing scale: 0.5rem -> 2rem -->
<div class="f6y-p-[1rem]/[3rem]"></div> <!-- arbitrary values -->
<div class="f6y-p-2/[3rem]"></div>      <!-- mixed -->
<div class="f6y-text-sm/xl"></div>      <!-- theme keys -->
<div class="f6y-p-2"></div>             <!-- max omitted -> min * ratio (default 2x) -->
<div class="f6y-p"></div>               <!-- min omitted -> per-property default -->

Every entry ships in linear, exp-, and log- variants and works with any built-in Tailwind variant:

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

See Utilities for the full value syntax per property group.

Next steps

How it works

The clamp math behind every fluid utility.

Utilities

Every utility family, with live demos.