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
Access at https://tailwind-prefix-tool.netlify.app/
Input
flex w-full hover:text-black-100 mt-8 -mb-4Output
tw-flex tw-w-full hover:tw-text-black-100 tw-mt-8 -tw-mb-4Switch to node 18 and just run yarn dev
- Convert to a VSCode Extension
You can open an issue, if any edge case is missing or something goes wrong!