DEV Community

Cover image for The New Tailwind Plugin You'll Want On Every Responsive Project
Jane Ori
Jane Ori

Posted on

The New Tailwind Plugin You'll Want On Every Responsive Project

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 demonstration, a screen resizes and the layout changes at specific breakpoints but the headers smoothly transition to a perfect size every step of the way

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)