Skip to main content

Introduction

Welcome to the Fluid Typography documentation!

What is Fluid Typography?​

Fluid Typography is a zero-config, responsive typography plugin for Tailwind CSS v3 and v4 that scales smoothly between viewports using CSS clamp(). It works out-of-the-box with sensible defaults, or can be customized to match your design system.

Key Features​

✨ Zero Configuration - Install, add to your Tailwind config, and start using it immediately

📱 Responsive by Default - Automatically scales between mobile (375px) and desktop (1440px) viewports

🎨 Customizable - Add custom scales, adjust viewport ranges, and control all typographic properties

🔧 Tailwind v3 & v4 Support - Works seamlessly with both major Tailwind CSS versions

📦 TypeScript Support - Full type definitions included

🤝 tailwind-merge Ready - Built-in integration support for tailwind-merge

How It Works​

Fluid Typography uses CSS clamp() functions to create responsive font sizes that scale smoothly between defined minimum and maximum sizes. Instead of using breakpoints, your typography flows naturally with the viewport size.

/* Example output */
font-size: clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem);

Why Fluid Typography?​

Traditional Approach​

// Multiple breakpoints needed
<h1 className="text-2xl md:text-3xl lg:text-4xl xl:text-5xl">Title</h1>

With Fluid Typography​

// Single class, scales automatically
<h1 className="text-h1">Title</h1>

Quick Example​

import fluidTypography from 'fluid-typography'

// tailwind.config.ts
export default {
  plugins: [fluidTypography],
}
// Your components
<h1 className="text-display-xl">Hero Title</h1>
<p className="text-body">Body text that scales smoothly</p>

That's it! No configuration needed.

What's Next?​

Explore the documentation to learn more: