Continuous responsive utilities for Tailwind CSS v4.

Features

• Built for Tailwind CSS v4 and its CSS-first configuration
• Uses Tailwind’s native scanner — no custom extractor
• Viewport and container-fluid utilities
• 140 reviewed fixed-length families with theme values, arbitrary values, negatives, variants, and @apply
• Fluid typography with an optional WCAG SC 1.4.4 guard
• Companion support for tailwind-merge v3

Installation

1. Install the package

   Install lerpwind alongside Tailwind CSS v4.

   npm install tailwindcss lerpwind

2. Load the plugin in CSS

   Tailwind v4 finds your classes automatically. No extractor or content configuration is required.

   @import "tailwindcss";
   @plugin "lerpwind";

3. Add fluid classes

   Put @ before a supported utility and the end value after /.

   <div class="@p-4/10 @gap-2/6">
     ...
   </div>

Basic usage

<button class="@px-4/8 @py-2/4 @text-sm/xl ...">
  Fluid button
</button>

With Tailwind’s default theme, values interpolate from sm (40rem) through 2xl (96rem). Below the start breakpoint the first value is used; above the end breakpoint the second value is used.

[class="@p-4/8"] {
  padding: clamp(1rem, 0.2857rem + 1.7857vw, 2rem);
}

Normal variants and negative values work as expected:

<div class="hover:@mt-2/10 @-ml-4/8">...</div>

The minus sign must come after the fluid marker: @-mt-2/10, not -@mt-2/10. This is the form Tailwind’s native scanner recognizes.

Lerpwind vs. native breakpoints

Native Tailwind responsive variants pick a fixed value at each breakpoint. Lerpwind keeps the same minimum and maximum values, but fills the space between them with one continuous scale.

The native version is a good fit when the design should change in distinct steps. The Lerpwind version is useful when the same property should grow smoothly. It does not replace structural breakpoints such as switching a grid from one column to three columns.

Drag the handle below. This live example uses Tailwind’s native container variants on the left and Lerpwind’s container-fluid utilities on the right, so both respond to the same resizable area.

<section class="p-4 sm:p-6 md:p-8 lg:p-9 xl:p-10">
  <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
    Step by step
  </h2>
</section>

<section class="@p-[4,10,sm,xl]">
  <h2 class="@text-[3xl,7xl,sm,xl]">
    Width by width
  </h2>
</section>

Per-utility ranges

Use a four-part arbitrary value to specify the two values and two breakpoints:

<!-- gap 2 → 8 while the viewport grows from sm → xl -->
<div class="@gap-[2,8,sm,xl]">...</div>

<!-- fixed CSS lengths work too -->
<div class="@w-[20rem,48rem,30rem,80rem]">...</div>

<!-- omit one breakpoint to use that side's default -->
<div class="@p-[4,8,md,] @gap-[2,8,,xl]">...</div>

Container-fluid utilities

Tailwind v4 includes container queries. Use @cq- to interpolate against the nearest query container with the cqw unit:

<section class="@container">
  <div class="@cq-p-4/10 @cq-gap-[2,8,sm,4xl]">...</div>
</section>

Container-fluid utilities default to the smallest and largest --container-* values in the theme.

Native container variants can be combined with fluid container values:

<section class="@container">
  <div class="@sm:@cq-p-4/10">...</div>
</section>

Here @sm: decides when the rule applies, while @cq-p-4/10 performs the continuous scaling.

Fluid typography

@text-* interpolates both font size and compatible line-height values from Tailwind’s font-size tuple:

<h1 class="@text-sm/xl">Fluid type</h1>

The WCAG 2.2 SC 1.4.4 zoom guard is enabled by default. When a scale fails it, the class is omitted and the build prints a warning. You should still test zoom behavior in the browsers you support.

Configuration

Set global defaults in the CSS-first plugin block:

@import "tailwindcss";

@plugin "lerpwind" {
  min-viewport: 20rem;
  max-viewport: 80rem;
  min-container: 16rem;
  max-container: 64rem;
  check-sc-144: true;
}

Viewport and container limits can be fixed lengths or Tailwind theme names such as sm, xl, and 4xl.

The default class marker is @. If your template language reserves @ in attributes (notably Razor/Blazor), set class-name: fluid; and write fluid-p-4/8 instead.

If your Tailwind theme uses @theme prefix(tw), the prefix remains a variant:

<div class="tw:@p-4/8">...</div>

Supported utilities

The v4 rewrite explicitly registers 140 length-based families through Tailwind’s public plugin API:

• Margin, padding, gap/space, inset, width, height, size, flex-basis, columns, translate, perspective, and text-indent
• Scroll margin and scroll padding
• Border/divide/ring width and spacing, border radius, outline width/offset, decoration thickness/offset, and stroke width
• Blur and backdrop blur
• Fixed-length tab-size values such as @tab-[1rem]/[2rem]
• Line height and letter spacing with compatible fixed lengths
• Font size, including its line-height tuple
• Length-typed dynamic utilities from other plugins loaded after lerpwind

Endpoints must resolve to fixed lengths. Values such as auto, percentages, CSS variables, and min-content cannot be interpolated reliably at build time and are rejected with a warning.

The complete reviewed list and deliberate exclusions are maintained in the utility manifest .

Migrating from v1

Delete the old extract configuration. It is neither exported nor needed by Lerpwind.

Follow the complete migration guide for Tailwind v4 setup, configuration, Razor/Blazor syntax, class composition, and production-build verification.

tailwind-merge

Install the companion package when component class names are composed with tailwind-merge:

npm install tailwind-merge lerpwind-merge

import { extendTailwindMerge } from 'tailwind-merge'
import { withLerpwind } from 'lerpwind-merge'

export const twMerge = extendTailwindMerge(withLerpwind)

The companion merges only documented fixed-length families. Fluid-looking colors, numbers, angles, and compound values are deliberately left alone. Third-party length utilities can opt in through withLerpwindOptions({ additionalClassGroups: [...] }).

Formatting and editor tooling

Lerpwind has no formatter or linter runtime dependency. Compatibility tests verify that Prettier, prettier-plugin-tailwindcss, and ESLint preserve its candidates, and that the official Tailwind CSS Language Server loads the plugin and suggests fluid modifiers. This repository uses Biome with its experimental Tailwind class-sorting rule disabled because that rule does not understand custom utilities yet.

Troubleshooting

If a class is missing, first confirm Tailwind v4 is compiling the CSS entrypoint and that @plugin "lerpwind" follows the Tailwind import. Keep candidates as complete static strings, use @source for files outside automatic detection, and inspect warnings for invalid or mismatched length units. A container-fluid class also needs an @container ancestor.

The troubleshooting guide covers template-parser fallback, formatting tools, tailwind-merge, and framework checks.

Browser support

This package follows Tailwind CSS v4’s browser requirements. The generated fluid expressions use widely supported clamp() and viewport units; container-fluid utilities additionally require container query units (cqw).

Origin

Lerpwind is an independent project originally based on fluid-tailwind , created by Maxwell Barvian. The Tailwind CSS v4 rewrite and subsequent development are maintained independently by Loosand. Lerpwind is not affiliated with or officially endorsed by the original project.