Although this makes the font scale with the viewport, using vw alone is usually not a good choice for body text.

For example, on a 320px-wide viewport:

2vw = 6.4px

That's far too small for comfortable reading.

Pure viewport-based sizing can also make typography harder to control because the font size is directly tied to viewport dimensions rather than having a sensible minimum and maximum.

Instead, combine a root-relative unit such as rem with vw:

font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);

This gives you three important benefits:

• Text has a predictable minimum size.
• Text has a controlled maximum size.
• The size changes smoothly between those limits.

The result is much more predictable across phones, tablets, laptops, and large desktop displays.

How Tailwind CSS v4 Makes Fluid Typography Easier

Tailwind CSS v4 introduced a CSS-first approach to configuration.

Instead of putting every design token in a JavaScript or TypeScript configuration file, you can define custom theme variables directly in your CSS using the @theme directive.

For example:

@import "tailwindcss";

@theme inline {
  --text-fluid-base: clamp(0.925rem, 0.9rem + 0.25vw, 1rem);
  --text-fluid-base--line-height: 1.5;
}

This creates a reusable text-fluid-base utility.

You can then use it directly in your markup:

<p class="text-fluid-base">
  This paragraph uses fluid typography.
</p>

This is particularly useful when building a design system because your typography scale becomes a reusable set of design tokens rather than a collection of one-off utility combinations.

How Tailwind CSS v4 Theme Tokens Work

When you define a --text-* variable inside @theme, Tailwind can use it to generate a corresponding text-* utility.

For example:

@theme inline {
  --text-fluid-base: clamp(0.925rem, 0.9rem + 0.25vw, 1rem);
}

gives you: