What's new in CSS?

clamp()

clamp()

The CSS clamp(), min() and max() properties have had full support since 2020, but Tailwinders might have missed out on its benefits as TW doesn't have a built-in mechanism for it (outside of arbitrary values).

clamp() takes 3 parameters - a minimum value, a preferred value, and a maximum value. And can be used on everything from font sizes to padding, enabling a truly responsive layout.

Standard CSS

h1 {
  font-size: clamp(1.25rem, 4vw, 3.75rem);
}

Tailwind

<h1 class="text-[clamp(1.25rem,4vw,3.75rem)]">

This can be vastly improved with the fluid.tw plugin

The Benefits

If you resize your browser, here we see the difference between using clamp() and simply using a vw value for the font-size. Without clamp() the text gets too small on small screens and too big on wider screens! The text also loses the ability to resize if someone uses the zoom controls in their browser.

Lorem ipsum dolor sit

font-size: clamp(16px, 2vw, 36px);

Lorem ipsum dolor sit

font-size: 2vw;

The Magic "preferred" value

Deciding what to use for the middle 'ideal' value in the clamp() can feel a bit arbitrary, but there is a mathematically ideal number that will ensure the smoothest scaling between your min and max values.

It's far too complex to do manually, but there are many calculators that will work this out for you.

A clamp calculator screenshot

Lorem ipsum dolor sit

font-size: clamp(1.5rem, 0.9706rem + 2.2588vw, 4.5rem);

The problem with this is it's quite a cumbersome manual process, particularly if you want to go heavy on clamp() usage for all spacing and sizing in your layout.

For Tailwind, there is a plugin which allows you to make use of clamp() (complete with the 'magic' ideal values) with an (in my opinion) intuitive syntax...

clamp() in Tailwind via fluid.tw

With the fluid.tw plugin, instead of adjusting your sizing/spacing values at different breakpoints like this...

Lorem ipsum dolor sit

<div class="p-4 lg:p-8 xl:p-12">
  <p class="text-base md:text-xl xl:text-3xl"></p>
</div>

...you can just define a minimum value and a maximum value and it will scale smoothly in between...

Lorem ipsum dolor sit

<div class="~p-4/12">
  <p class="~text-base/3xl"></p>
</div>

One thing to bear in mind is the plugin requires all units to be in rem units, including the breakpoints defined in your Tailwind config, so you will need to convert these to rem if they're not already, e.g...

screens: {
  "2xs": "23.4375rem", /* 375px */
  xs: "30rem", /* 480px */
  sm: "37.5rem", /* 600px */
  md: "48rem", /* 768px */
  lg: "64rem", /* 1024px */
  xl: "80rem", /* 1280px */
  "2xl": "87.5rem", /* 1400px */
  "3xl": "100rem", /* 1600px */
  "4xl": "118.75rem", /* 1900px */
},

clamp()

Menu