Tailwind Prefix Tool

A handy tool to add prefix in tailwind classes and saves you a big time handling naming conflicts in legacy codebases

Using latest tailwind and covers all the major cases regarding prefix mentioned in tailwindcss docs

• Variant modifier
• Negatives values
• Important Specifier

Demo

Access at https://tailwind-prefix-tool.netlify.app/

Input

flex w-full hover:text-black-100 mt-8 -mb-4

Output

tw-flex tw-w-full hover:tw-text-black-100 tw-mt-8 -tw-mb-4

Development

Switch to node 18 and just run yarn dev

Future Roadmap

• Convert to a VSCode Extension

Raise an Issue

You can open an issue, if any edge case is missing or something goes wrong!