Clamp the font sizes

[jenstornell]

There is a quite new CSS feature called clamp. With clamp we can for example adjust the font sizes to mobile sizes.

For example I used text-5xl on a site. While it looks great on a desktop, there are no reason to have it that big on a mobile device. A short text then takes up half the screen of a mobile device.

How I solve it today

<div class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
</div>

Future solution?

Auto adjust it so that the text-5xl is a range between text-2xl and text-5xl depending on the viewport size.

https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

[jenstornell]

I just tried to clamp and it works fine with Tailwind font sizes.

JS

module.exports = {
  theme: {
    extend: {
      fontSize: {
        dynamic: "clamp(1rem, 10vw, 2rem)",
      },
    }
  }
};

HTML

<div class="text-dynamic">
  I'm resizing depending on the screen width.
</div>

[jenstornell]

For people who likes clamp, there is a great tool to calculate it here: https://codesandbox.io/s/clamp-linear-intepolation-based-on-viewport-width-builder-xgkft?from-embed

[IRediTOTO]

This look like a great feature, why no one consider it :\ Finding something like this