--- title: Introduction description: 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. sidebar: label: Introduction order: 0 --- Fluid UI scaling utilities for [Tailwind CSS v4](https://tailwindcss.com). 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. ```html
padding ramps 0.5rem → 2rem
…the same ramp, exponential ease-in
…the same ramp, logarithmic ease-out
font-size ramps var(--text-sm) → var(--text-4xl)
``` **[Quickstart](/quickstart)** Install fluidity and ship your first fluid utility in minutes. **[Utilities](/utilities)** Every utility family fluidity ships, grouped by property. ## 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 1. **Measure progress** A `progress` value between 0 and 1 tracks how far the axis has moved from `--f6y-lower` (40rem) to `--f6y-upper` (96rem). Clamping keeps values within these bounds, and by default the axis is `--f6y-axis` (`100vw`). 2. **Ease it** The three curves (linear, exponential ease-in, and logarithmic ease-out) transform progress before interpolation, and all three share the same two endpoints. 3. **Interpolate the value** The eased progress blends `min` into `max`: `value = min + (max - min) * ease(progress)`. ```text 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](/concepts/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](/concepts/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](/concepts/configuration). ## Utility coverage Every property below ships in linear, `exp-`, and `log-` variants, for a total of 279 `@utility` rules: | Group | Utilities | | ---------------------- | ------------------------------------------------------------------------------- | | Padding | `p`, `px`, `py`, `ps`, `pe`, `pt`, `pr`, `pb`, `pl` | | Margin | `m`, `mx`, `my`, `ms`, `me`, `mt`, `mr`, `mb`, `ml` | | Gap | `gap`, `gap-x`, `gap-y` | | Space between | `space-x`, `space-y` | | Position | `inset`, `inset-x`, `inset-y`, `start`, `end`, `top`, `right`, `bottom`, `left` | | Scroll margin | `scroll-m{,x,y,s,e,t,r,b,l}` | | Scroll padding | `scroll-p{,x,y,s,e,t,r,b,l}` | | Sizing | `w`, `h`, `size`, `min-w`, `min-h`, `max-w`, `max-h`, `basis` | | Typography | `text`, `leading`, `tracking`, `indent` | | Border radius | `rounded` and every logical/physical corner | | Border & outline width | `border{,x,y,s,e,t,r,b,l}`, `outline`, `outline-offset` | See [Utilities](/utilities) for a live demo of every family, or the [utility index](/reference/utility-index) for the flat, generated list of all 279 classes. ## Next steps **[Concepts](/concepts)** The clamp model, the three curves, and the configuration custom properties. **[Recipes](/recipes)** Responsive type scales, container-scoped ramps, and combining with variants. **[Reference](/reference)** The complete, generated index of every utility fluidity ships.