Introduction

Fluidity is a CSS-only Tailwind CSS v4 plugin that scales padding, margin, sizing, and typography fluidly between a min and a max as the viewport grows.

Fluid UI scaling utilities for Tailwind CSS v4. CSS only, no JavaScript, no build step, no config file. @import it after Tailwind and every f6y-* utility scales continuously between a min and a max as the viewport (or a container) grows, clamped at both ends.

<div class="f6y-p-2/8">padding ramps 0.5rem → 2rem</div>
<div class="f6y-exp-p-2/8">…the same ramp, exponential ease-in</div>
<div class="f6y-log-p-2/8">…the same ramp, logarithmic ease-out</div>
<div class="f6y-text-sm/4xl">font-size ramps var(--text-sm) → var(--text-4xl)</div>

Why Fluidity exists

Responsive design usually means picking values at a handful of breakpoints and letting the browser snap between them, like p-4 md:p-6 lg:p-8. That works, but the jump at each breakpoint is visible, and the values between the breakpoints you picked are whatever the browser happened to land on.

Fluidity replaces the jump with a ramp. Every utility interpolates continuously between a min and a max as a measured length (the viewport by default, or a container) that moves between a lower and an upper bound. There’s no discrete step to notice, and no gap between breakpoints where the value was never actually designed.

How it works

progress = clamp(0, (axis - lower) / (upper - lower), 1)
value    = min + (max - min) * ease(progress)

Division of two lengths isn’t valid in calc(), so fluidity computes progress as clamp(0, tan(atan2(axis - lower, upper - lower)), 1) using a standard trick for length ÷ length in plain CSS. See How it works for the full derivation.

Every declaration a fluidity utility emits is a single calc() expression. There’s no custom property indirection to debug in DevTools and no JavaScript computing anything at runtime. The browser’s CSS engine does it all, every frame, for free.

What makes it different

Zero runtime overhead

No JavaScript ships, none runs, and there’s nothing to hydrate. A fluidity utility is exactly as cheap as any other Tailwind utility. It’s a @utility rule Tailwind compiles like any other, and the browser evaluates calc()/clamp() natively.

Every fluidity utility is a real Tailwind utility

Fluidity ships 279 @utility rules, generated from the same --value()/--modifier() machinery Tailwind’s own core utilities use. That means arbitrary values, theme keys, and every built-in variant (including md:f6y-p-8/32, hover:f6y-gap-2/8, dark:f6y-p-4) work exactly the way they do on p-4 or gap-2, because to Tailwind, they’re the same kind of thing.

Three curves, one set of endpoints

Every utility ships in linear, exp- (exponential ease-in), and log- (logarithmic ease-out) variants, and all three land on identical values at the bounds. Swapping f6y-p-2/8 for f6y-exp-p-2/8 changes nothing about where the ramp starts or ends. Only the path it takes changes. See Curves.

Viewport or container: Your choice

Every fluid utility reads a single custom property, --f6y-axis, to know what to scale with. It defaults to 100vw, but switching an element (and everything beneath it) to scale with its container instead of the viewport is one utility class: f6y-axis-cqi. See Configuration.

Utility coverage

Every property below ships in linear, exp-, and log- variants, for a total of 279 @utility rules:

See Utilities for a live demo of every family, or the utility index for the flat, generated list of all 279 classes.

Next steps