Fluidwind replaces breakpoint-based responsive design with
smooth
clamp() based fluid scaling. One
class. Every viewport. Zero breakpoints.
npm install fluidwind Fluid typography scales beautifully.
Generated CSS:
font-size: clamp(1.75rem, 4.18vw + 0.17rem, 4.5rem)The Problem
Responsive design shouldn't jump between discrete sizes. Real screens don't work that way.
Breakpoint-based
Abrupt jumps at sm: md: lg:
Fluidwind
Perfectly smooth across every viewport
Before - 16 classes
Regular Tailwind<h1 class="
text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl 2xl:text-7xl
mt-4 sm:mt-6 md:mt-8 lg:mt-10 xl:mt-12
px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16
">After - 3 classes
Fluidwind<h1 class="
fw-text-[28px-72px]
fw-mt-[16px-48px]
fw-px-[16px-64px]
">Smooth at every pixel. No breakpoints. No guessing.
Live Demo
Type any Fluidwind value below. See the generated CSS and watch the element scale in real time.
Preview
Fluid text
28.8px at 800px viewport
Generated CSS
font-size: clamp(1rem, 3.0047vw + 0.2958rem, 3rem)Fluidwind class
fw-text-[16px-48px]Calculator
Enter your desired min/max values and viewport range. Get the Fluidwind class and the CSS it generates instantly.
Values
Viewport
Generated CSS
font-size: clamp(1rem, 3.0047vw + 0.2958rem, 3rem)Fluidwind class
fw-text-[16px-48px]Color
Smoothly transition between two colors across your viewport
range using color-mix().
Installation
Install Fluidwind, add it to your Tailwind config, and start
using fw-* classes immediately.
npm install fluidwind// tailwind.config.js
module.exports = {
plugins: [require('fluidwind')({ remBase: 16 })],
theme: {
fluidwind: {
defaultRange: ['375px', '1440px'],
ranges: {
post: ['600px', '1000px'],
},
},
},
};fw-* classes in your markup
<!-- Use any fw-* utility with an arbitrary value range -->
<h1 class="fw-text-[28px-72px]">Fluid heading</h1>
<div class="fw-p-[16px-48px] fw-gap-[8px-24px]">
<p class="fw-text-[14px-18px]">
Fluid body text with fluid padding and gap.
</p>
</div>
<!-- Named ranges from config -->
<article class="fw-text-[16px-20px]/post">
Scales within the 'post' range (600px–1000px).
</article>
<!-- Inline viewport range -->
<span class="fw-text-[12px-16px]/[480-960]">
Custom range, no config needed.
</span>