Globhy
AllBusinessHealthMarketingTechnologyTravelUncategorized
HAHartanto20 views
Posted on 07 Sep 2026Edited on 07 Sep 2026

Share:

Technology
#Programming#React#Tailwind CSS
Fluid Typography with Tailwind CSS v4: A Better Approach to Responsive Text

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

javascript
<p class="text-fluid-base">
  Fluid text
</p>

You can also define the corresponding line height:

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

This keeps the font size and line height together as part of the same typography token.

It also makes the typography scale easier to reuse across components, content pages, and CMS-driven interfaces.

A Practical Fluid Typography Scale

For a modern web application or content-heavy website, you can define a complete fluid typography scale like this:

javascript
@import "tailwindcss";

@theme inline {
  /* Fluid Typography
     Scales smoothly from mobile to large desktop screens */

  --text-fluid-xs: clamp(0.7rem, 0.68rem + 0.15vw, 0.75rem);
  --text-fluid-xs--line-height: 1.4;

  --text-fluid-sm: clamp(0.8rem, 0.78rem + 0.2vw, 0.875rem);
  --text-fluid-sm--line-height: 1.45;

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

  --text-fluid-lg: clamp(1.025rem, 1rem + 0.35vw, 1.15rem);
  --text-fluid-lg--line-height: 1.4;

  --text-fluid-xl: clamp(1.15rem, 1.1rem + 0.5vw, 1.35rem);
  --text-fluid-xl--line-height: 1.35;

  --text-fluid-2xl: clamp(1.3rem, 1.2rem + 0.8vw, 1.65rem);
  --text-fluid-2xl--line-height: 1.25;

  --text-fluid-3xl: clamp(1.55rem, 1.4rem + 1.2vw, 2.1rem);
  --text-fluid-3xl--line-height: 1.2;

  --text-fluid-4xl: clamp(1.85rem, 1.6rem + 1.75vw, 2.65rem);
  --text-fluid-4xl--line-height: 1.15;

  --text-fluid-5xl: clamp(2.25rem, 1.9rem + 2.4vw, 3.35rem);
  --text-fluid-5xl--line-height: 1.1;
}

The important part isn't the exact values. The key idea is that each typography token has:

javascript
minimum → fluid preferred value → maximum

This creates a predictable type scale while allowing the typography to adapt continuously to the viewport.

How the Scale Changes Across Screen Sizes

Here's an approximate comparison of how the scale behaves across common viewport widths:

Class

Mobile (~360px)

Tablet (~768px)

Desktop (~1280px+)

Recommended Usage

text-fluid-xs

~11.3px

~11.7px

12px

Timestamps, badges, legal text

text-fluid-sm

~12.9px

~13.4px

14px

Helper text, captions

text-fluid-base

~14.9px

~15.5px

16px

Body text

text-fluid-lg

~16.5px

~17.4px

18.4px

Lead text, callouts

text-fluid-xl

~18.5px

~19.8px

21.6px

Card titles, H3

text-fluid-2xl

~21px

~23.2px

26.4px

Section headings, H2

text-fluid-3xl

~25px

~28.4px

33.6px

Page titles, H1

text-fluid-4xl

~30px

~35.2px

42.4px

Hero headings

text-fluid-5xl

~36.5px

~43.5px

53.6px

Large display text

The exact rendered size depends on the root font size and the viewport, but the important behavior is that the typography scales continuously rather than jumping between breakpoint values.

In Practice: One Class for Every Screen

Once the fluid typography tokens are defined, your component markup becomes much cleaner.

Before

javascript
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-4">
  Building Scalable Web Applications
</h1>

<p class="text-sm md:text-base text-gray-600 mb-4">
  Responsive design doesn't have to require dozens of utility classes.
</p>

After

javascript
<h1 class="text-fluid-3xl font-bold tracking-tight mb-4">
  Building Scalable Web Applications
</h1>

<p class="text-fluid-base text-gray-600 mb-4">
  Responsive design doesn't have to require dozens of utility classes.
</p>

The second version is easier to read and makes the design intent much clearer.

Instead of saying:

"Use this font size on small screens, then this one on medium screens, and another one on large screens."

Share:

More in Technology

View category
Improving Warehouse Productivity in the Durable Medical Equipment Industry
Technology
6

Improving Warehouse Productivity in the Durable Medical Equipment Industry

When warehouse processes rely on manual records and disconnected applications, employees can spend excessive time locating products, reconciling stock levels, and resolving order discrepancies. Improving these processes can reduce operational waste, support better purchasing decisions, and help patients receive their equipment on time.

READ ARTICLE