Skip to main content

Quick Start

Get up and running with Fluid Typography in minutes.

Tailwind CSS v3​

1. Add to Tailwind Config​

tailwind.config.ts
import fluidTypography from 'fluid-typography'

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  plugins: [fluidTypography],
}

2. Use in Your Components​

App.tsx
export default function App() {
  return (
    <div>
      <h1 className="text-display-xl">Hero Title</h1>
      <h2 className="text-h1">Main Heading</h2>
      <h3 className="text-h2">Section Heading</h3>
      <p className="text-body">Regular paragraph text</p>
      <p className="text-body-sm">Smaller body text</p>
      <span className="text-caption">Image caption</span>
    </div>
  )
}

That's it! 🎉 No additional configuration needed.

Tailwind CSS v4​

1. Add Plugin to CSS​

app.css
@import "tailwindcss";
@plugin "fluid-typography";

2. Use in Your Components​

App.tsx
export default function App() {
  return (
    <div>
      <h1 className="text-display-xl">Hero Title</h1>
      <h2 className="text-h1">Main Heading</h2>
      <p className="text-body">Body text that scales smoothly</p>
    </div>
  )
}

Verify Installation​

To verify that Fluid Typography is working correctly, inspect your elements in the browser DevTools. You should see CSS clamp() functions applied to font sizes:

/* Expected output */
.text-h1 {
  font-size: clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
}

What's Next?​

Now that you're set up, explore more features:

Common Issues​

Classes Not Working​

If your typography classes aren't being applied:

  1. Check Tailwind's content paths - Make sure your content glob patterns include all files where you're using the classes
  2. Restart your dev server - Sometimes you need to restart after adding a new plugin
  3. Clear Tailwind's cache - Delete .cache or node_modules/.cache folders

Type Errors (TypeScript)​

If you're getting TypeScript errors:

tailwind.config.ts
import type { Config } from 'tailwindcss'
import fluidTypography from 'fluid-typography'

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  plugins: [fluidTypography],
} satisfies Config