px-to-vw-tailwind README

"Tailwind PX-VW Converter" is a versatile VS Code extension tailored for Tailwind CSS developers. It seamlessly transforms all px units in your code to vw and back, taking into account user-defined breakpoints. This tool simplifies responsive design by making viewport-relative units easier to manage and enhances your workflow for scalable web development.

Features

Tailwind PX-VW Converter calculates all pixel values in a tailwind driven code to convert them into corresponding vw unit and back;

The extension takes into consideration the breakpoints you will provide and uses them as anchor for the multiplier (divider when the calculation is from px units to vw units);

To process the the whole code in the open file simple run the corresponding command ("transform pixels" - to transform pixel units to vw units, "transform viewport width units" - to transform vw units to pixel units) or press the shortcut keys:

"transform pixels" - ctrl+alt+x (cmd+option+x for mac)
"transform viewport width units" - ctr+alt+w (cmd+option+w for mac)

Run the same commands or press the same key combinations to process only the highlighted (selected) are in your code.

The algorithm is designed to be as precise as possible even with the very complicated tailwind classes.

Extension Settings

Please specify your breakpoints with the same naming used in tailwind classes! E.g. "desktop:w-[100px]" -> "desktop". For the breakpoint value use the screen size you want to be reflected. E.g. figma design frame width for desktop: 1920. For the default one (e.g. mobile if mobile-first) leave the keyword as an empty string. E.g. "w-[100px]" -> "".

For more information

• Author's github
• Author's email

Enjoy!