Skip to main content

FAQ

Frequently asked questions about Fluid Typography.

General​

Do I need to configure anything?​

No. Fluid Typography works out-of-the-box with zero configuration. Just install, add to your Tailwind config, and use the classes. Configuration is optional and only needed if you want to customize scales or viewport ranges.

Does it work with both Tailwind v3 and v4?​

Yes. Fluid Typography fully supports both Tailwind CSS v3.4+ and v4.0+. For v3, add it to the plugins array. For v4, use @plugin "fluid-typography" in your CSS file.

Will it increase my CSS bundle size?​

Not significantly. The plugin generates only the typography classes you actually use, thanks to Tailwind's tree-shaking. Each class adds minimal CSS (font-size, line-height, font-weight, and optional letter-spacing/text-transform).

Can I use this in production?​

Yes. Fluid Typography is production-ready and uses standard CSS clamp() functions, which have excellent browser support (97%+ of all browsers).

Customization​

Can I customize the typography scale?​

Yes! Add custom scales alongside the defaults:

fluidTypography({
  customScales: {
    'hero': {
      size: [50, 80],      // [minPx, maxPx]
      fontWeight: '900',   // Optional
      lineHeight: 1.1      // Optional
    }
  }
})

Your custom scales are added to the defaults, so you get both text-hero (custom) and text-h1 (default).

Can I change the viewport range?​

Yes! Customize min/max viewport widths:

fluidTypography({
  minViewportWidth: 320,   // Default: 375
  maxViewportWidth: 1920   // Default: 1440
})

Can I disable default scales?​

No. Currently, you can only add custom scales, not disable defaults. This ensures consistency and prevents breaking changes. Custom scales extend rather than replace the defaults.

Why do body variants match Tailwind defaults?​

For easy mental mapping! On desktop:

  • text-body = text-base (16px)
  • text-body-sm = text-sm (14px)
  • text-body-xs = text-xs (12px)

The difference? These scale down on mobile for better readability.

Usage​

Can I override font-weight?​

Yes! Font weights are included by default for convenience, but you can override them:

<h1 className="text-h1 font-normal">Light heading</h1>
<p className="text-body font-semibold">Bold paragraph</p>

Can I combine with other Tailwind utilities?​

Absolutely! Fluid typography classes work with all Tailwind utilities:

<h1 className="text-h1 text-blue-600 font-black tracking-tighter">
  Customized Heading
</h1>

What if I use conditional classes?​

Add the safelist to your config:

import fluidTypography, { getTypographySafelist } from 'fluid-typography'

const options = {
  customScales: {
    'hero': { size: [50, 80] }
  }
}

export default {
  plugins: [fluidTypography(options)],
  safelist: getTypographySafelist(options)  // Pass same options
}

Do I need tailwind-merge integration?​

Only if you're already using tailwind-merge in your project (via cn() utility or similar). Otherwise, skip it. This integrates seamlessly with class merging utilities.

Technical​

How does the fluid scaling work?​

Uses CSS clamp() to scale smoothly between viewports:

font-size: clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem);
/*              └─ min   └─ preferred      └─ max */

The formula automatically adjusts based on your minViewportWidth and maxViewportWidth settings.

What's the browser support?​

CSS clamp() is supported in:

  • Chrome 79+ (Dec 2019)
  • Firefox 75+ (Apr 2020)
  • Safari 13.1+ (Mar 2020)
  • Edge 79+ (Jan 2020)

That's 97%+ of all browsers globally. For older browsers, the minimum size is used as a fallback.

Does it work with CSS-in-JS?​

Yes. As long as your CSS-in-JS solution supports Tailwind CSS, Fluid Typography will work. The plugin generates standard Tailwind utility classes.

Can I use it with other Tailwind plugins?​

Yes. Fluid Typography plays nicely with other Tailwind plugins. Just add them all to the plugins array:

export default {
  plugins: [
    fluidTypography(),
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography')
  ]
}

Troubleshooting​

Classes not working​

If your typography classes aren't being applied:

  1. Check content paths - Ensure your content glob patterns include all files using the classes
  2. Restart dev server - Sometimes needed after adding a new plugin
  3. Clear Tailwind's cache - Delete .cache or node_modules/.cache folders
  4. Check plugin installation - Verify fluid-typography is in your package.json

Type errors with TypeScript​

If you're getting TypeScript errors, ensure proper types:

import type { Config } from 'tailwindcss'
import fluidTypography from 'fluid-typography'

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

Custom classes not merging with tailwind-merge​

Make sure you've configured tailwind-merge with the same options:

// Both should use the SAME options
const options = {
  customScales: {
    'hero': { size: [50, 80] }
  }
}

// In tailwind.config.ts
plugins: [fluidTypography(options)]

// In utils.ts
getFluidTypographyMergeConfig(options)

Viewport range not working​

Ensure both min and max are set, and min < max:

// ❌ Wrong
minViewportWidth: 1440,
maxViewportWidth: 375

// ✅ Correct  
minViewportWidth: 375,
maxViewportWidth: 1440

Text not scaling on mobile​

Check your viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Package not found error​

Ensure you've installed the package:

npm install fluid-typography
# or
yarn add fluid-typography
# or
pnpm add fluid-typography

Performance​

Does it affect runtime performance?​

No. All scaling is done via CSS clamp() functions, which are computed by the browser at render time with no JavaScript overhead.

Will it slow down my build?​

No. The plugin is lightweight and adds minimal overhead to your Tailwind CSS build process.

How many classes does it generate?​

By default, 13 typography classes. Each custom scale adds 1 class. With tree-shaking, only used classes appear in your final CSS bundle.

Migration​

Can I migrate from existing typography?​

Yes. You can gradually adopt Fluid Typography:

  1. Keep existing typography utilities
  2. Add Fluid Typography classes where beneficial
  3. Test thoroughly before full migration
  4. Update components progressively

Coming from another fluid typography solution?​

Fluid Typography's API is designed to be intuitive. Main differences:

  • Zero configuration by default
  • TypeScript-first design
  • Built-in tailwind-merge support
  • Tailwind v3 & v4 compatible

Still Have Questions?​