Web development
Fluid typography with clamp
A fluid type scale uses clamp() in one theme token: no breakpoint, no jump. Here is the formula, its limits and when to skip it.
Key points
- clamp() inside a theme token produces a fluid scale with no breakpoints.
- The middle vw term needs a rem term beside it, or text zoom stops working.
- clamp() appears 0 times in the 97 cached blocks: type stays on fixed classes.
Fluid typography in Tailwind uses clamp() inside a --text-* token: one declaration covers every screen, with no breakpoint and no size jump.
The formula
A clamp() takes three arguments: minimum, preferred value, maximum. The preferred value adds a rem term to a vw term, so text grows with the window and still responds to zoom.
@import "tailwindcss";
@theme {
--text-fluid-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-fluid-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
--text-fluid-display: clamp(2rem, 1.3rem + 3.2vw, 4rem);
}Each variable creates a utility: text-fluid-base, text-fluid-lg and text-fluid-display. In Tailwind 4 the --text-* namespace also feeds --text-*--line-height, which you set on the same token.
Where the scale stops
| Token | Minimum | Maximum |
|---|---|---|
| text-fluid-base | 1rem | 1.125rem |
| text-fluid-lg | 1.25rem | 1.5rem |
| text-fluid-display | 2rem | 4rem |
The table shows the trade-off: below the minimum the text stops shrinking, above the maximum it stops growing. Pick both ends by looking at the page at 320 px and at 1440 px, not on your development monitor.
What it does not fix
Size is not the line. clamp() leaves line-height alone: leading-tight or a --text-fluid-display--line-height token is still needed, or a 4 rem heading breathes badly.
- A fluid token changes every place that uses it, so the scale stays consistent because there is one source.
- A bare
vwunit ignores browser zoom: that is why the middle term mixesremwithvw. - Set the minimum for body text, not for headings: 1 rem below 400 px keeps the characters readable.
- Source: the tailwindcss.com documentation and the CSS Values 4 specification for
clamp(), read on 1 November 2026.
The limitation
A fluid scale is not an accessible scale: WCAG 1.4.4 requires text to reach 200% without loss of content, and a maximum in rem allows that while a maximum in vw does not. The second limit is about design: fluid type removes the control points, so a designer who thinks in breakpoints loses the reference marks.
Where to continue
The EneUI catalogue holds blog-01, blog-post-preview-tags-01 and text-reveal. For the static side read free fonts for interfaces, for the context what Tailwind CSS is, and for the comparison Tailwind against Bootstrap. The other two pieces in the series are the spacing scale and animations without JavaScript.
Frequently asked questions
What is clamp() in CSS?
It is a function that returns a value between a minimum and a maximum, with a preferred value in between: clamp(minimum, preferred, maximum).
Why not use vw alone?
Because vw ignores text zoom: someone who enlarges the page gets no bigger characters. A mixed rem and vw term keeps zoom working.
Do I need a media query with clamp()?
No. clamp() replaces the ladder of media queries for text size. Media queries stay useful for layout, not for body text.
How do I add it in Tailwind 4?
Declare --text-name inside the @theme block and use text-name in the markup. In Tailwind 3 the same scale goes in fontSize inside tailwind.config.js.
What happens at 320 px?
The text stays at the declared minimum. If the minimum is 1 rem, the body does not drop below 16 px; check headings and spacing at that width.