Fluid sizes with Tailwind arbitrary values
Tailwind lets you put any CSS value in square brackets. Because spaces separate classes, spaces inside the value are written as underscores, which Tailwind converts back when it generates the CSS. The calculator handles this for you and produces a class like text-[clamp(1rem,0.8333rem_+_0.8333vw,1.5rem)]. The underscores around the plus sign matter: CSS requires whitespace around + and − inside math functions.
Putting it in your theme
Arbitrary classes are perfect for one-off headings. When the same size appears in many places, move it into your theme instead. In Tailwind v4, add a variable such as --text-fluid-lg: clamp(…) inside your @theme block and you can use text-fluid-lg everywhere. In Tailwind v3, add the value to theme.extend.fontSize in tailwind.config.js.
Keeping fluid sizes in the theme gives you one source of truth: if the design changes, you update one line and every component follows.
Spacing utilities
The same output works for spacing. Switch the calculator to spacing mode and it writes p-[clamp(…)], which you can rename to px-, py-, m-, gap- or space-y- as needed. Combine fluid spacing with fluid text and most pages need no responsive prefixes at all for size.
Common pitfalls
If a text-[…] class does nothing, check that the value contains no plain spaces and that Tailwind can see the full class name in your source files – class names built by string concatenation are not detected. If Tailwind treats the value as a color, write it as text-[length:clamp(…)] to state the type explicitly.