TailwindCSS: Fluid Type Plugin

In addition to my latest blog post (TailwindCSS: Fluid typography with CSS Clamp | David Hellmann — Digital Designer & Developer) I've created a tailwindcss-fluid-type plugin to outsource this logic and to 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.

Good question as for every plugin out there. It's simple. I think fluid type is one of the things that solves a lot problems especially on mobile devices. In modern designs we often use huge font-sizes for headlines to be pithy. But on mobile devices sometimes this fonts are too big and we got strange scroll behaviors or strange word breaks. Cause we have not enough space to show the whole word.

We have two options to solve this problems. First option is to declare different font sizes for it like text-md md:text-xl and this works totally fine. But you have to do this all the time and it's a bit error-prone especially when more people work on a project. Maybe someone wrote text-md sm:text-xl and another one text-md lg:text-xl.

The second approach and in my opinion the much better one is to use fluid type here. Simply put it's just declaring a min and a max font size related to a viewport size. In between the font-size is calculated (fluid). Now you don't have to deal with font-sizes at different viewports. In addition to that we use modular scale here. More infos and a configurator is here to find: Modularscale

Any question about this topic? Let me know in the comments.