tailwindcss-fluid-font-size

With tailwindcss-fluid-font-size, fluid font size in Tailwind CSS (v3.3.2 and above) is straightforward to configure, write, read, and maintain.

What's fluid fluid size? Font size that's continuously responsive to a relative dimension (window width for example), as opposed to traditional, stepwise responsive CSS, where the styles change at distinct breakpoints.

This sentence is a demo! Try resizing your screen. It's .text-base on screens narrower than sm, .text-xl on screens wider than xl, and fluid in between going through .text-4xl at screen lg.

Add the plugin, and with no additional configuration you'll have utility classes for fluid typography going from any of Tailwind's font sizes between any of Tailwind's breakpoints, relative to window width or any other dimension. Customize it to add additional sizes and breakpoints. Intellisense works, responsive variants work, arbitrary classes work.

TIP

Want fluid lengths for things other than font-size, including for non-Tailwind CSS-in-JS? Check out my utility css-fluid-length