Fluid Typography and Spacing with Tailwind CSS in WordPress

Classic responsive design jumps between breakpoints: text-2xl on mobile, md:text-4xl on tablets, lg:text-5xl on desktop. Fluid typography scales smoothly with the screen width instead, so a heading is always the right size, with no breakpoint classes at all. The same idea works for spacing.

The CSS behind it: clamp()

clamp(min, preferred, max) picks a value that grows with the viewport but never goes below the minimum or above the maximum:

h1 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
}

At a narrow screen the heading is 2rem, at a wide screen 3.5rem, and in between it scales smoothly. The middle part (1.2rem + 3.4vw) is calculated from the two screen widths you design for, for example 375px and 1440px.

Scales, not random sizes

Good typography uses a modular scale: each size is the previous one multiplied by a ratio.

Ratio	Name	Feel
1.2	Minor Third	Balanced, good default
1.25	Major Third	Moderate contrast
1.333	Perfect Fourth	Strong contrast
1.618	Golden Ratio	Dramatic

A trick that works well: use a smaller ratio on mobile and a larger one on desktop. Headings then stand out on big screens without overwhelming small ones.

Setting it up in Tailwind v4 by hand

Define fluid values as theme variables, and Tailwind creates classes for them:

@theme {
  --text-base: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --text-xl:   clamp(1.2rem, 1.1rem + 0.47vw, 1.5rem);
  --text-3xl:  clamp(1.73rem, 1.48rem + 1.05vw, 2.37rem);
  --spacing-section: clamp(3rem, 2rem + 4vw, 6rem);
}

Now text-3xl is fluid and py-section gives sections fluid padding. The hard part is the maths: every size needs its own min, max and slope, and changing the ratio means recalculating all of them.

Setting it up with Winden’s Wizzard

Winden generates these values for you in its visual Wizzard:

1. Font Sizes: set the base size at the smallest and largest screen (for example 14px at 375px, 16px at 1440px), pick the min and max ratio, and choose how many steps you need. Winden calculates every fluid clamp() value and writes the @theme configuration.
2. Spacing: the same controls for a fluid spacing scale, plus one click for utility values (0, px, auto).
3. Choose fluid or fixed, and pixels in, rems out: enter Figma-style pixel values while the CSS uses accessible rems.

Use them like any Tailwind class: text-3xl, p-8, gap-12, now fluid everywhere, in Gutenberg and in Bricks, Oxygen and Elementor. With Gutenberg you can also pass these values into the block editor’s own font size and spacing controls.

Tips

• Keep the step count small. Six to eight font sizes cover most sites.
• Test at the extremes: a small phone and a very wide monitor.
• Don’t combine fluid sizes with lots of breakpoint overrides. Let the scale do the work.