Tailwind CSS 57 🎨 Fluid Typography and Fluid Spacing using Native clamp() Utilities
A responsive layout has two options for scaling. The first is a breakpoint: at md, the heading becomes 2rem; at lg, it becomes 2.5rem. The values jump at each breakpoint, and a viewport that is one pixel below the threshold shows the smaller size. The second is fluid scaling: the heading grows continuously with the viewport, from a minimum at the narrowest width to a maximum at the widest. The CSS clamp() function is the mechanism, and Tailwind exposes it through arbitrary values and a few built-in utilities. Fluid typography and fluid spacing replace the breakpoint jumps with smooth curves, and the result is a layout that adapts at every width rather than at a handful of thresholds.
Key point: clamp(min, preferred, max) returns the preferred value, bounded by the minimum and the maximum. The preferred value is usually a viewport-relative expression like 2vw + 1rem. The minimum and maximum prevent the value from becoming unreadable at the extremes.
Why fluid typography and spacing matter
The breakpoint-jump problem. A heading that is 1.5rem at 640px and 2rem at 641px jumps by 0.5rem at a single pixel of viewport change. The jump is visible, and it is not a smooth scaling. The design has two states, and the transition between them is abrupt.
The too-many-breakpoints problem. To make the jump smaller, a designer adds more breakpoints: sm, md, lg, xl, 2xl, and several custom ones. Each breakpoint is a class, each class is a CSS rule, and the stylesheet grows. The values still jump, just more often.
The fixed-size problem. A heading with a single size is too large on a phone and too small on a desktop. A fixed size cannot serve both. The clamp() function solves this by scaling the value between a minimum and a maximum, with a viewport-relative preferred value in between.
The spacing problem. The same applies to spacing. A section that has 2rem of padding on a phone and 8rem on a desktop needs a fluid value, not a breakpoint. The clamp() function applies to any length value, including padding, margin, and gap.
The design-token problem. A fluid scale can be expressed as a set of tokens: --text-base, --text-lg, --space-section, and so on. The tokens are defined once with clamp() and used everywhere. Changing the scale is a one-line edit.
The user-preference problem. Fluid values respond to the viewport, but they should also respect the user’s font-size preference. A clamp() expression that uses rem as the base respects the user’s setting, while a pure vw expression does not. The correct expression combines both.
The accessibility problem. Text that is too small is unreadable. A fluid scale must have a minimum that meets the accessibility guidelines, typically 16px for body text. The clamp() minimum enforces this.
a. The clamp() function
clamp() is a CSS function that takes three arguments: a minimum, a preferred value, and a maximum. It returns the preferred value, bounded by the other two.
The syntax
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);The minimum is 1rem, the preferred value is 0.5rem + 2vw, and the maximum is 2rem. If the preferred value is below 1rem, the result is 1rem. If it is above 2rem, the result is 2rem. Otherwise, the result is the preferred value.
The viewport units
The preferred value is usually a combination of a fixed value and a viewport-relative unit.
| Unit | Meaning |
|---|---|
vw | 1% of the viewport width |
vh | 1% of the viewport height |
vmin | 1% of the smaller dimension |
vmax | 1% of the larger dimension |
svw, lvh, dvh | Small, large, dynamic viewport units |
The vw unit is the most common for typography, because it scales with the width. The vh unit is used for vertical spacing, but it has known issues on mobile browsers where the address bar changes the viewport height. The dvh and svh units address this.
The linear interpolation
The preferred value is a linear function of the viewport width. The formula for a value that goes from min at minViewport to max at maxViewport is:
slope = (max - min) / (maxViewport - minViewport)
preferred = slope * 100vw + (min - slope * minViewport)The result is a clamp() expression with the computed slope and intercept.
The Tailwind arbitrary value
Tailwind supports clamp() through arbitrary values.
<h1 class="text-[clamp(1.5rem,1rem+3vw,3rem)]">Heading</h1>The class produces font-size: clamp(1.5rem, 1rem + 3vw, 3rem). The arbitrary value syntax allows any CSS value, and clamp() is one of them.
The arbitrary property
Tailwind also supports arbitrary properties with the [property:value] syntax.
<h1 class="[font-size:clamp(1.5rem,1rem+3vw,3rem)]">Heading</h1>The syntax is useful when the property does not have a Tailwind utility, or when the value is complex.
The theme extension
A design system defines the fluid scale once in the Tailwind configuration.
// tailwind.config.js
export default {
theme: {
extend: {
fontSize: {
fluid: 'clamp(1rem, 0.5rem + 2vw, 1.25rem)',
'fluid-lg': 'clamp(1.25rem, 0.75rem + 2.5vw, 1.75rem)',
'fluid-xl': 'clamp(1.5rem, 1rem + 3vw, 2.5rem)',
'fluid-2xl': 'clamp(2rem, 1rem + 5vw, 4rem)',
},
spacing: {
'fluid-sm': 'clamp(0.5rem, 0.25rem + 1vw, 1rem)',
'fluid-md': 'clamp(1rem, 0.5rem + 2vw, 2rem)',
'fluid-lg': 'clamp(2rem, 1rem + 4vw, 6rem)',
},
},
},
};The tokens are used as text-fluid-xl and p-fluid-md. The scale is defined once, and the components use the tokens.
The spacing tokens
The same pattern applies to spacing.
<section class="px-fluid-md py-fluid-lg">
<h2 class="text-fluid-xl">Title</h2>
<p class="text-fluid mt-4">Body text.</p>
</section>The padding and the typography scale together. The section has a minimum padding on a phone and a maximum on a desktop, with a smooth curve between.
b. Building a fluid scale
A fluid scale is a set of tokens that share the same minimum and maximum viewports. The scale is designed so that the ratios between adjacent sizes are consistent, and the values grow smoothly.
The reference viewports
The scale is defined by two viewports: the minimum and the maximum. The minimum is typically the smallest supported width, such as 320px or 375px. The maximum is typically the largest content width, such as 1280px or 1440px.
Minimum viewport: 320px
Maximum viewport: 1280pxThe values are designed for these two viewports, and they scale linearly between them.
The type scale
A type scale defines a set of sizes with a consistent ratio. A ratio of 1.2 is a minor third, 1.25 is a major third, and 1.333 is a perfect fourth. The scale is designed at the minimum viewport and at the maximum viewport, and the clamp() expressions interpolate between them.
| Token | Min size (320px) | Max size (1280px) |
|---|---|---|
text-sm | 0.875rem | 1rem |
text-base | 1rem | 1.125rem |
text-lg | 1.125rem | 1.5rem |
text-xl | 1.25rem | 1.875rem |
text-2xl | 1.5rem | 2.5rem |
text-3xl | 2rem | 4rem |
The clamp() expression for each token is computed from the min and max values.
The slope calculation
For a token that goes from minSize at minViewport to maxSize at maxViewport, the slope and intercept are:
slope = (maxSize - minSize) / (maxViewport - minViewport)
intercept = minSize - slope * minViewport
preferred = intercept + slope * 100vwThe result is expressed in rem and vw. The 100vw is the viewport width in the same unit as the slope.
The computed tokens
The computed tokens for the example scale:
--text-sm: clamp(0.875rem, 0.833rem + 0.2vw, 1rem);
--text-base: clamp(1rem, 0.958rem + 0.2vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
--text-xl: clamp(1.25rem, 1.042rem + 1.04vw, 1.875rem);
--text-2xl: clamp(1.5rem, 1.167rem + 1.67vw, 2.5rem);
--text-3xl: clamp(2rem, 1.333rem + 3.33vw, 4rem);The exact values are computed by the formula, and the result is a set of tokens that scale smoothly between the two viewports.
The Tailwind integration
The tokens are added to the Tailwind configuration as font sizes and spacing values.
export default {
theme: {
extend: {
fontSize: {
sm: 'clamp(0.875rem, 0.833rem + 0.2vw, 1rem)',
base: 'clamp(1rem, 0.958rem + 0.2vw, 1.125rem)',
lg: 'clamp(1.125rem, 1rem + 0.625vw, 1.5rem)',
xl: 'clamp(1.25rem, 1.042rem + 1.04vw, 1.875rem)',
'2xl': 'clamp(1.5rem, 1.167rem + 1.67vw, 2.5rem)',
'3xl': 'clamp(2rem, 1.333rem + 3.33vw, 4rem)',
},
},
},
};The components use text-sm, text-lg, and the rest. The utilities now produce fluid values.
The spacing scale
The same approach applies to spacing. The values are designed at the minimum and maximum viewports, and the clamp() expressions interpolate.
| Token | Min (320px) | Max (1280px) |
|---|---|---|
space-xs | 0.25rem | 0.5rem |
space-sm | 0.5rem | 1rem |
space-md | 1rem | 2rem |
space-lg | 2rem | 4rem |
space-xl | 4rem | 8rem |
The tokens are added to the spacing namespace, and they are used as p-space-md, m-space-lg, and gap-space-sm.
The line-height pairing
A fluid font size should be paired with a line-height that is also fluid, or with a unitless value that scales automatically. A unitless line-height of 1.2 for headings and 1.6 for body text works for any font size.
fontSize: {
'fluid-xl': ['clamp(1.25rem, 1.042rem + 1.04vw, 1.875rem)', {
lineHeight: '1.2',
}],
'fluid-base': ['clamp(1rem, 0.958rem + 0.2vw, 1.125rem)', {
lineHeight: '1.6',
}],
},The line-height is part of the token definition, so the pairing is consistent.
c. Best practices and pitfalls
Fluid scaling is powerful, but it has pitfalls. The values can be too aggressive, the minimums can be too small, and the expressions can be hard to read.
The minimum must be readable
The minimum value is the smallest the text will be. It should meet the accessibility guidelines, which typically require 16px for body text. A minimum of 0.875rem (14px) is acceptable for secondary text, but not for the primary content.
The maximum must not be too large
The maximum value is the largest the text will be. A heading that is 6rem on a 4K monitor is overwhelming. The maximum should be chosen for the largest supported viewport, not for the maximum possible viewport.
The slope must be reasonable
A slope that is too steep makes the text grow too fast. A heading that goes from 1.5rem to 6rem over a 960px range grows by 0.0047rem per pixel, which is a slope of about 0.47vw. A slope above 1vw is aggressive and may produce uncomfortable scaling.
The clamp() fallback
clamp() is supported in all modern browsers. For older browsers, a fallback is a static value.
h1 {
font-size: 2rem; /* Fallback */
font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
}The second declaration overrides the first in browsers that support clamp(), and the first is used in browsers that do not.
The custom property approach
A fluid scale is easier to maintain when the clamp() expressions are defined as custom properties.
:root {
--text-fluid-base: clamp(1rem, 0.958rem + 0.2vw, 1.125rem);
--text-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
}The Tailwind configuration references the variables, and the components use the utilities. The scale is defined in one place.
The Tailwind plugin
A Tailwind plugin can generate the clamp() expressions from a min and max size, which keeps the configuration readable.
function fluid({ min, max, minVw = 320, maxVw = 1280 }) {
const slope = (max - min) / (maxVw - minVw);
const intercept = min - slope * minVw;
return `clamp(${min}rem, ${intercept}rem + ${slope * 100}vw, ${max}rem)`;
}
// Usage in the config:
fontSize: {
'fluid-lg': fluid({ min: 1.125, max: 1.5 }),
},The helper computes the clamp() expression from the min and max values, and the configuration stays readable.
The user preference
A fluid value that uses rem respects the user’s font-size preference. A value that uses only vw does not, because the viewport width is independent of the font size. The correct expression combines both:
font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);The 0.5rem scales with the user’s preference, and the 2vw scales with the viewport. The combination respects both.
The container queries
clamp() uses the viewport width. A component that is rendered in a narrow container should scale with the container, not the viewport. Container queries and the cqw unit address this, but they are a separate mechanism.
.card {
container-type: inline-size;
}
.card h2 {
font-size: clamp(1rem, 0.5rem + 5cqw, 2rem);
}The cqw unit is 1% of the container’s width. The clamp() expression scales with the container, not the viewport.
The testing
Fluid values should be tested at the minimum viewport, the maximum viewport, and a few intermediate widths. The values should be readable at the minimum and not overwhelming at the maximum. The transition between them should be smooth, with no jumps.
The pitfall table
| Pitfall | Cause | Fix |
|---|---|---|
| Text too small | Minimum too low | Raise the minimum to 1rem |
| Text too large | Maximum too high | Lower the maximum |
| Abrupt scaling | Slope too steep | Reduce the viewport coefficient |
| User preference ignored | Pure vw value | Combine rem and vw |
| No fallback | clamp() unsupported | Add a static fallback |
| Inconsistent scale | Ad hoc values | Define the scale as tokens |
| Container mismatch | Viewport-based in a narrow container | Use container queries |
Complete Example Session
/* ============================================
PART 1: THE BASIC CLAMP
============================================ */
h1 {
font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
}
/* Minimum 1.5rem, preferred 1rem + 3vw, maximum 3rem. */
/* ============================================
PART 2: THE TAILWIND ARBITRARY VALUE
============================================ */
<h1 class="text-[clamp(1.5rem,1rem+3vw,3rem)]">Heading</h1>
/* ============================================
PART 3: THE THEME TOKENS
============================================ */
// tailwind.config.js
export default {
theme: {
extend: {
fontSize: {
'fluid-sm': 'clamp(0.875rem, 0.833rem + 0.2vw, 1rem)',
'fluid-base': 'clamp(1rem, 0.958rem + 0.2vw, 1.125rem)',
'fluid-lg': 'clamp(1.125rem, 1rem + 0.625vw, 1.5rem)',
'fluid-xl': 'clamp(1.25rem, 1.042rem + 1.04vw, 1.875rem)',
'fluid-2xl': 'clamp(1.5rem, 1.167rem + 1.67vw, 2.5rem)',
},
spacing: {
'fluid-sm': 'clamp(0.5rem, 0.417rem + 0.42vw, 1rem)',
'fluid-md': 'clamp(1rem, 0.833rem + 0.83vw, 2rem)',
'fluid-lg': 'clamp(2rem, 1.667rem + 1.67vw, 4rem)',
},
},
},
};
/* ============================================
PART 4: THE COMPONENT USAGE
============================================ */
<section class="px-fluid-md py-fluid-lg">
<h1 class="text-fluid-2xl font-bold">Title</h1>
<p class="text-fluid-base mt-fluid-sm">Body text.</p>
</section>
/* ============================================
PART 5: THE FLUID HELPER
============================================ */
function fluid(min, max, minVw = 320, maxVw = 1280) {
const slope = (max - min) / (maxVw - minVw);
const intercept = min - slope * minVw;
return `clamp(${min}rem, ${intercept.toFixed(3)}rem + ${(slope * 100).toFixed(3)}vw, ${max}rem)`;
}
// fluid(1.5, 3) → 'clamp(1.5rem, 1.000rem + 0.313vw, 3rem)'
/* ============================================
PART 6: THE CONFIG WITH THE HELPER
============================================ */
const scale = {
sm: [0.875, 1],
base: [1, 1.125],
lg: [1.125, 1.5],
xl: [1.25, 1.875],
'2xl': [1.5, 2.5],
'3xl': [2, 4],
};
const fontSize = Object.fromEntries(
Object.entries(scale).map(([name, [min, max]]) => [
`fluid-${name}`,
fluid(min, max),
])
);
export default {
theme: {
extend: { fontSize },
},
};
/* ============================================
PART 7: THE LINE HEIGHT PAIRING
============================================ */
fontSize: {
'fluid-base': ['clamp(1rem, 0.958rem + 0.2vw, 1.125rem)', { lineHeight: '1.6' }],
'fluid-2xl': ['clamp(1.5rem, 1.167rem + 1.67vw, 2.5rem)', { lineHeight: '1.2' }],
},
/* ============================================
PART 8: THE USER PREFERENCE
============================================ */
/* rem respects the user's font-size preference. */
/* vw scales with the viewport. */
/* The combination respects both. */
font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);
/* Pure vw ignores the user preference. */
font-size: clamp(16px, 2vw, 24px); /* ❌ */
/* ============================================
PART 9: THE CONTAINER QUERY
============================================ */
.card {
container-type: inline-size;
}
.card h2 {
font-size: clamp(1rem, 0.5rem + 5cqw, 2rem);
}
/* The heading scales with the container, not the viewport. */
/* ============================================
PART 10: THE FALLBACK
============================================ */
h1 {
font-size: 2rem; /* Fallback for old browsers */
font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
}
/* The second declaration overrides the first in modern browsers. */The ten parts showed the basic clamp(), the Tailwind arbitrary value, the theme tokens, the component usage, the fluid helper, the config with the helper, the line-height pairing, the user preference, the container query, and the fallback.
Quick Reference
clamp() Syntax
| Argument | Position | Purpose |
|---|---|---|
| Minimum | 1st | The smallest value |
| Preferred | 2nd | The fluid value |
| Maximum | 3rd | The largest value |
Viewport Units
| Unit | Meaning |
|---|---|
vw | 1% of viewport width |
vh | 1% of viewport height |
vmin | 1% of the smaller dimension |
vmax | 1% of the larger dimension |
dvh | Dynamic viewport height |
cqw | 1% of container width |
The Fluid Formula
slope = (max - min) / (maxVw - minVw)
intercept = min - slope * minVw
preferred = intercept + slope * 100vwTailwind Arbitrary Values
| Syntax | Example |
|---|---|
| Arbitrary value | text-[clamp(1rem,2vw,2rem)] |
| Arbitrary property | [font-size:clamp(1rem,2vw,2rem)] |
| Theme token | text-fluid-lg |
Type Scale Example
| Token | Min | Max |
|---|---|---|
sm | 0.875rem | 1rem |
base | 1rem | 1.125rem |
lg | 1.125rem | 1.5rem |
xl | 1.25rem | 1.875rem |
2xl | 1.5rem | 2.5rem |
Best Practices
✅ Do This:
/* Combine rem and vw for the preferred value. */
font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem); /* ✅ */
/* Keep the minimum readable. */
font-size: clamp(1rem, ...); /* ✅ */
/* Define the scale as tokens. */
fontSize: { 'fluid-lg': 'clamp(...)' } /* ✅ */
/* Pair font sizes with line heights. */
['clamp(...)', { lineHeight: '1.6' }] /* ✅ */
/* Provide a fallback. */
font-size: 2rem; font-size: clamp(...); /* ✅ */
/* Use container queries for components. */
container-type: inline-size; font-size: clamp(1rem, 5cqw, 2rem); /* ✅ */
/* Test at the minimum and maximum viewports. */
/* And at a few widths in between. */ /* ✅ */❌ Don’t Do This:
/* Don't use a pure vw value. */
font-size: clamp(16px, 2vw, 24px); /* ❌ Ignores user preference */
/* Don't set the minimum below 1rem for body text. */
font-size: clamp(0.75rem, ...); /* ❌ Too small */
/* Don't set the maximum too high. */
font-size: clamp(1.5rem, ..., 8rem); /* ❌ Overwhelming */
/* Don't use an aggressive slope. */
font-size: clamp(1rem, 5vw, 3rem); /* ❌ Grows too fast */
/* Don't use viewport units in a narrow container. */
/* Use cqw instead. */ /* ❌ */
/* Don't forget the fallback for old browsers. */
font-size: clamp(...); /* ❌ No fallback */
/* Don't define the scale ad hoc. */
/* Define it as tokens. */ /* ❌ */Common Pitfalls
| Pitfall | Why It Happens | Fix |
|---|---|---|
| Text too small | Minimum too low | Raise to 1rem |
| Text too large | Maximum too high | Lower the maximum |
| Abrupt scaling | Slope too steep | Reduce the vw coefficient |
| User preference ignored | Pure vw value | Combine rem and vw |
| No fallback | clamp() unsupported | Add a static value |
| Inconsistent scale | Ad hoc values | Define tokens |
| Container mismatch | Viewport-based in a narrow card | Use container queries |
| Line height mismatch | Fixed line height | Use unitless line height |
Real-World Examples
1. Basic Heading
<h1 class="text-[clamp(1.5rem,1rem+3vw,3rem)]">Heading</h1>2. Fluid Body
<p class="text-[clamp(1rem,0.958rem+0.2vw,1.125rem)]">Body</p>3. Fluid Spacing
<section class="px-[clamp(1rem,0.833rem+0.83vw,2rem)]">...</section>4. Theme Token
fontSize: { 'fluid-xl': 'clamp(1.25rem, 1.042rem + 1.04vw, 1.875rem)' }5. Line Height Pairing
'fluid-lg': ['clamp(1.125rem, 1rem + 0.625vw, 1.5rem)', { lineHeight: '1.4' }]6. Fluid Helper
const fluid = (min, max) => `clamp(${min}rem, ..., ${max}rem)`;7. User Preference
font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);8. Container Query
.card h2 { font-size: clamp(1rem, 0.5rem + 5cqw, 2rem); }9. Fallback
h1 { font-size: 2rem; font-size: clamp(1.5rem, 1rem + 3vw, 3rem); }10. Testing
// Test at 320px, 768px, 1280px, and 1920px.Visual
How clamp() Works
┌────────────────────────────────────────────────────────────┐
│ clamp(min, preferred, max) │
│ │
│ Value │
│ ▲ │
│ │ ┌─────────── max │
│ │ / │
│ │ / │
│ │ / │
│ │ / │
│ │ / │
│ │ / │
│ │ ──────────┘ │
│ │ min │
│ │ │
│ └──────────────────────────────────────▶ Viewport width │
│ narrow mid wide │
│ │
│ Below the threshold: value = min │
│ Above the threshold: value = max │
│ Between: value = preferred (linear) │
│ │
│ The result is a smooth curve, not a jump. │
└────────────────────────────────────────────────────────────┘The Breakpoint vs Fluid Comparison
┌────────────────────────────────────────────────────────────┐
│ BREAKPOINT vs FLUID │
│ │
│ BREAKPOINT │
│ ┌──────────────────────────────────────────────────┐ │
│ │ text-base md:text-lg lg:text-xl │ │
│ │ │ │
│ │ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │1rem│ │1.25│ │1.5 │ │ │
│ │ └────┘ └────┘ └────┘ │ │
│ │ ──────┐ ──────┐ ──────┐ │ │
│ │ └─────┘ └──────┘ └───── │ │
│ │ Jumps at each breakpoint. │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ FLUID │
│ ┌──────────────────────────────────────────────────┐ │
│ │ text-[clamp(1rem,0.5rem+2vw,1.5rem)] │ │
│ │ │ │
│ │ ┌──────────────────────────────┐ │ │
│ │ │ Smooth curve │ │ │
│ │ └──────────────────────────────┘ │ │
│ │ ────────────────────────────────────── │ │
│ │ Grows continuously with the viewport. │ │
│ └──────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────┘The Fluid Scale
┌────────────────────────────────────────────────────────────┐
│ FLUID TYPE SCALE │
│ │
│ Viewport: 320px Viewport: 1280px │
│ ┌──────────────────────┐ ┌──────────────────────┐│
│ │ text-sm: 0.875rem │ │ text-sm: 1rem ││
│ │ text-base: 1rem │ │ text-base: 1.125rem ││
│ │ text-lg: 1.125rem │ │ text-lg: 1.5rem ││
│ │ text-xl: 1.25rem │ │ text-xl: 1.875rem ││
│ │ text-2xl: 1.5rem │ │ text-2xl: 2.5rem ││
│ │ text-3xl: 2rem │ │ text-3xl: 4rem ││
│ └──────────────────────┘ └──────────────────────┘│
│ │ │ │
│ └─────────── interpolate ─────────┘ │
│ │
│ Each token is a clamp() expression. │
│ The scale is consistent across the range. │
└────────────────────────────────────────────────────────────┘The Preferred Value
┌────────────────────────────────────────────────────────────┐
│ THE PREFERRED VALUE │
│ │
│ clamp(min, preferred, max) │
│ │
│ preferred = intercept + slope × 100vw │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ slope = (max - min) / (maxVw - minVw) │ │
│ │ intercept = min - slope × minVw │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ The preferred value is a linear function of the viewport. │
│ The min and max are the bounds. │
│ The result is a straight line between the two bounds. │
│ │
│ The rem component respects the user's font preference. │
│ The vw component scales with the viewport. │
└────────────────────────────────────────────────────────────┘Summary
| Item | Value |
|---|---|
clamp() | CSS function with min, preferred, and max |
| Preferred value | A linear function of the viewport |
vw | 1% of viewport width |
cqw | 1% of container width |
| Tailwind arbitrary value | text-[clamp(...)] |
| Theme token | fontSize: { 'fluid-lg': 'clamp(...)' } |
| Fluid scale | A set of tokens with consistent min and max |
| User preference | Combine rem and vw |
| Container query | Use cqw for components |
| Fallback | A static value before the clamp() |
Key takeaways:
clamp()scales a value between a minimum and a maximum. The preferred value is a viewport-relative expression, and the minimum and maximum bound it. The result is a smooth curve instead of a breakpoint jump.- The preferred value combines
remandvw. Theremcomponent respects the user’s font-size preference, and thevwcomponent scales with the viewport. A purevwvalue ignores the user’s preference and should be avoided. - Tailwind exposes
clamp()through arbitrary values and theme tokens. The arbitrary value syntax istext-[clamp(...)], and the theme extension defines tokens that the components use as utilities. - The fluid scale is defined by two viewports. The minimum viewport is the narrowest supported width, and the maximum viewport is the widest content width. The tokens are designed at both, and the
clamp()expressions interpolate. - The minimum must be readable. Body text should not go below 1rem. The minimum is the accessibility floor, and it should meet the guidelines at the narrowest viewport.
- The maximum must not be overwhelming. A heading that is 8rem on a large monitor is too large. The maximum should be chosen for the largest supported viewport, not the maximum possible one.
- Container queries scale with the container, not the viewport. A component in a narrow card should use
cqwunits, notvw, so it scales with the card rather than the window. - A fallback is needed for old browsers. A static value precedes the
clamp()declaration, and browsers that do not supportclamp()use the fallback. - The scale should be defined once. A fluid scale is a set of tokens, not a collection of ad hoc values. The tokens are defined in the configuration, and the components use the utilities.
Remember: Fluid typography and spacing replace breakpoint jumps with smooth curves. The clamp() function scales a value between a minimum and a maximum, with a viewport-relative preferred value in between. Tailwind exposes clamp() through arbitrary values and theme tokens, and the fluid scale is defined once in the configuration. The preferred value combines rem and vw so that the user’s font-size preference is respected. The minimum is the accessibility floor, the maximum is the largest supported viewport, and the slope is the rate of growth. Container queries extend the technique to components that scale with their container rather than the viewport. The result is a layout that adapts at every width, not at a handful of breakpoints, and a set of tokens that keep the scale consistent across the application.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!