In addition to my latest blog post (TailwindCSS: Fluid typography with CSS Clamp), I've created a tailwindcss-fluid-type plugin to outsource this logic and have a cleaner config.

It does the same, and I could remove the overhead from my config file. The current release is 1.2.1 and it offers the same options as tailwind default font-size options like line-height and letter-spacing.

Why should I use this plugin? 

Good question, as for every plugin out there.

It's simple. Fluid type is one solution to many problems, especially on mobile devices. In modern designs, we often use large font sizes for headlines to make them impactful. However, on mobile devices, these fonts can sometimes be too big, leading to strange scrolling behaviors or awkward word breaks because there isn't enough space to display the entire word.

We have two options to solve these problems. The first option is to declare different font sizes, like text-md md:text-xl, and this works perfectly fine. But you have to do this all the time, and it can be a bit error-prone, primarily when multiple people work on a project. For instance, one person might write text-md sm:text-xl, and another might write text-md lg:text-xl.

The second approach, and in my opinion the better one, is to use fluid type. Simply put, it involves declaring a minimum and maximum font size that adjusts based on the viewport size, allowing the font size to scale fluidly. This method eliminates the need to set font sizes for different viewports. Additionally, we use a modular scale to set font sizes proportionally. More information and a configurator can be found here: Modularscale

Any questions about this topic? Let me know.