Lerpwind

Continuous responsive utilities for Tailwind CSS v4.

Lerpwind interpolates smoothly between Tailwind values with CSS clamp(), so responsive scales do not need a stack of breakpoint variants.

<main class="@px-4/10 @py-10/24">
	<h1 class="@text-4xl/7xl">One scale, every viewport.</h1>
</main>

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

The project uses Tailwind's public plugin API and native scanner. It supports viewport-fluid and container-fluid utilities, theme and arbitrary values, negative values, variants, fluid type, CSS-first configuration, @apply, and Tailwind Merge v3.

Agent Skill

Lerpwind includes a project-scoped Agent Skill for supported coding agents. From the application where you want to use Lerpwind, run:

npx skills add Loosand/lerpwind --skill lerpwind

Then ask the agent:

Use $lerpwind to install and configure Lerpwind in this project.

Installing the Skill does not install the npm package. It gives the agent the framework-aware setup, migration, usage, and troubleshooting guidance needed to inspect the project and verify a real production build.

Compared with native breakpoints

<!-- Native Tailwind: discrete steps -->
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">...</h1>

<!-- Lerpwind: continuous interpolation from sm through xl -->
<h1 class="@text-[3xl,7xl,sm,xl]">...</h1>

Keep native breakpoints for structural layout changes. Use Lerpwind when type, spacing, or a dimension should scale smoothly between two endpoints.

• Package documentation
• Full Vite demo
• Comprehensive Flex, Grid, and container-query showcase
• Breakpoint-only version of the comprehensive showcase
• Tailwind Merge companion
• Verified Next.js, Nuxt, Vite, and CLI integrations
• Repository-scoped Codex Skill
• Stability and compatibility policy
• Complete supported utility manifest
• Migration guide
• Troubleshooting guide
• Changelog
• Release process and v1 checklist

Framework integrations

There is no framework-specific Lerpwind runtime. Keep the framework's official Tailwind CSS v4 integration and load the same lerpwind plugin from CSS. Production-build fixtures for Next.js, Nuxt, Vite + React, and the Tailwind CLI run in CI as compatibility contracts.

If setup automation becomes necessary, it should take the form of one initializer or codemod that detects the framework and updates its existing Tailwind entrypoint—not separate adapter packages that only forward to the same plugin.

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.

The original copyright notice and MIT license are preserved in LICENSE.md.