Web designs are often polished & delivered, targeting just your largest mobile, tablet, and desktop view widths.
In the gap between design handoff and dev implementation, there's a lot of squishing that has to happen to the desktop design until it breaks into the smaller tablet layout.
Headers wrap, layout stretches vertically, designers weep, developers can't reasonably do much to help.
Until now...
fluid-text-plugin was published earlier today on GitHub and NPM
Just one Tailwind* utility class and you can specify fluid font sizes that maintain well designed headers no matter what size the screen is at. The fluid-text-plugin even uses your custom breakpoints automatically with zero additional setup.
* also works with UnoCSS and as a standalone utility function when no build system is available.
I suspect this one will get a lot of traction as it makes a well known issue, encountered on almost every project, near-trivial to fix.
Not bad for a little weekend project 🎉
Hope it helps you!
Will you be using it? 💜
Top comments (0)