Stop writing dozens of sm:text-lg md:text-xl media queries. Generate mathematically perfect CSS clamp() values for your Tailwind config so your fonts scale smoothly across all devices.
The CSS clamp(min, preferred, max) function takes three values. For fluid typography, the "preferred" value is calculated using a mix of rem (for accessibility) and vw (viewport width). As the user's screen grows or shrinks, the text size scales smoothly between the minimum and maximum boundaries you set, eliminating the need for hard HTML media query breakpoints.
This generator automatically calculates the math using rem units based on a standard 16px base font size. If you use hard pixel values for fonts, you break the user's browser accessibility settings (e.g., if a visually impaired user sets their default browser font size to 24px). REM units ensure your fluid typography scales respectfully with the user's OS preferences.
Simply copy the generated JavaScript object and paste it into your tailwind.config.js file inside the theme.extend.fontSize block. You can then apply the classes directly in your HTML, such as <h1 class="text-fluid-3xl">, and Tailwind will output the perfect clamp utilities.
Progressier is fully compatible with Tailwind. Add installation and notifications to your Tailwind app now.
Generate PWA See plans