Fluid Typography with Tailwind CSS v4: A Better Approach to Responsive Text

If you've built responsive websites with Tailwind CSS, you've probably written markup like this:

<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">
  The Future of Web Design
</h1>

<p class="text-sm md:text-base lg:text-lg text-gray-600">
  Responsive typography is often harder than it needs to be.
</p>

This approach works, but it has a fundamental limitation: the font size changes in discrete steps rather than scaling continuously with the viewport.

Tailwind CSS breakpoint modifiers such as sm:, md:, and lg: are excellent for macro layout changes like grids, flexbox, spacing, and positioning. However, using them extensively for typography can introduce several problems:

1. Abrupt size changes — When resizing a browser window or rotating a tablet, text jumps from one predefined size to another.
2. Awkward intermediate sizes — Devices and layouts that fall between standard breakpoints, such as iPad Minis, foldable devices, and split-screen browser windows, may end up with typography that feels too small or too large.
3. Class clutter — A single heading can easily accumulate three or four breakpoint-specific font-size utilities.

A better approach is fluid typography using CSS clamp().

And with Tailwind CSS v4's CSS-first configuration, creating a reusable fluid type scale is cleaner than ever.

What Is Fluid Typography?

Traditional responsive typography typically uses breakpoints to define a few fixed font sizes:

font-size: 1.5rem;

@media (min-width: 768px) {
  font-size: 2rem;
}

@media (min-width: 1024px) {
  font-size: 2.5rem;
}

The problem is that the font size stays fixed between breakpoints and then suddenly jumps when a breakpoint is crossed.

Fluid typography takes a different approach.

Instead of defining a handful of discrete sizes, the font size changes continuously based on the viewport size.

CSS provides the clamp() function specifically for this kind of use case:

font-size: clamp(minimum, preferred, maximum);

The three values represent:

• Minimum — The smallest font size allowed.
• Preferred — The ideal fluid value, typically based on a combination of rem and vw.
• Maximum — The largest font size allowed.

For example:

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

As the viewport grows, the preferred value increases. However, the final font size can never go below 1rem or above 1.15rem.

This gives you smooth scaling without requiring additional media queries.

Why Not Just Use vw?

A common first attempt at fluid typography is something like:

font-size: 2vw;