CSS Clamp

Tailwind CSS clamp() generator

Fluid font sizes and spacing as Tailwind theme tokens or classes.

Screen width
1152px

Actions

Clamp sizes

The smallest and largest size, for padding, margin or font size.

rem
rem

Viewport settings

The screen widths where the value starts and stops growing.

rem
rem

The clamped value will be between 1.5rem and 3rem, applied linearly between viewports of 24rem and 120rem.

@theme { --text-fluid: ; }

Use it as text-fluid.

Fluid values for Tailwind CSS

Tailwind has no fluid utilities built in, but it accepts any clamp() value as a theme token or an arbitrary value. This generator writes that value for you in the format your project uses. Switch between Text and Container to get a font size or a spacing token, and pick the output under the result.

The three output formats

  • Tailwind v4 gives you an @theme block. Paste it into the CSS file that imports Tailwind.
  • Tailwind v3 gives you an entry for theme.extend in tailwind.config.js.
  • Class gives you an arbitrary value like text-[clamp(1.5rem,1.125rem+1.563vw,3rem)] to use straight in your markup.

Build a fluid design system

Generate one value per step of your type scale and one or two spacing values, all with the same viewport range, and keep them together in your theme. The Tailwind CSS clamp() guide walks through a complete setup, and the fluid type scale generator creates a whole scale at once.

Frequently asked questions

Which output should I pick?

Pick Tailwind v4 if your project configures Tailwind in CSS with @theme, Tailwind v3 if it has a tailwind.config.js, and Class for a one-off value you only use once. Values you reuse belong in the theme.

How do I rename the generated token?

Change the word fluid in the variable or config key to any name you like. In Tailwind v4, --text-display creates text-display and --spacing-gutter creates p-gutter, gap-gutter and every other spacing utility.

Can I make the default Tailwind sizes fluid?

Yes. In Tailwind v4, redefine an existing token, for example --text-4xl, inside @theme with a clamp() value. Every text-4xl in your project then becomes fluid without touching your markup.

Why does the class output have no spaces?

Tailwind class names cannot contain spaces, so the arbitrary value is written without them. Tailwind adds the spaces around + and - back when it generates the CSS, so the result is a valid clamp().