clamp(1rem, 0.9rem + 0.3vw, 1.2rem);

rather than:

clamp(16px, 0.9rem + 0.3vw, 19.2px);

Using rem makes your typography scale better aligned with the root font-size setting and user preferences.

It also makes the design tokens easier to maintain because the values are expressed in the same relative unit commonly used throughout a modern CSS design system.

3. Don't Forget Line Height

Font size is only one part of typography.

Line height has a major impact on readability, especially for body text.

For example:

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

Body text generally benefits from a more generous line height, while large headings can use tighter spacing:

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

The goal is not simply to make text bigger or smaller, but to maintain a comfortable visual rhythm at every viewport size.

When Should You Still Use Tailwind Breakpoints?

Fluid typography doesn't mean you should completely stop using responsive modifiers.

Breakpoints are still useful when the design needs a discrete change.

For example:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  ...
</div>

This is a good use of breakpoints because the layout genuinely needs to change structure.

Similarly, you may want to change spacing, alignment, visibility, or component structure at specific breakpoints.

The distinction is:

Use breakpoints when the design needs a discrete change.

Use fluid values when the design needs continuous scaling.

This makes the two approaches complementary rather than competing.