Why Fluid Typography?
Everything you need for responsive typography
⚡
Zero Configuration
Install, add to your Tailwind config, and start using. No complex setup needed.
📱
Responsive by Default
Automatically scales between mobile (375px) and desktop (1440px) viewports.
🎨
Fully Customizable
Add custom scales, adjust viewport ranges, and control all properties.
🔧
Tailwind v3 & v4
Works seamlessly with both major Tailwind CSS versions.
📦
TypeScript Support
Full type definitions included for better developer experience.
🤝
tailwind-merge Ready
Built-in integration for proper class merging and conflict resolution.
Traditional vs Fluid
❌ Breakpoint-Based
<h1 className="text-2xl md:text-3xl lg:text-4xl xl:text-5xl"> Title </h1>
Multiple breakpoints • Jumpy resizing • More CSS
✅ Fluid Typography
<h1 className="text-h1">
Title
</h1>Single class • Smooth scaling • Less CSS
Available Typography Scales
Display
Display 2XL
Display XL
Display LG
Display
Headings
H1 • 28→36px
H2 • 24→30px
H3 • 20→24px
Body Text
Body • 14→16px
Body SM • 13→14px
Body XS • 11→12px
Small Text
Caption • 10→11px
Overline • 10→11px
Ready to Get Started?
Join developers building better interfaces with fluid typography.