Tailwindcss - Auto-add "tw-" prefix to existing codebase

Question

Tailwindcss has clear documentation on how one can generate prefixes for all tailwind classes to better isolate the styles of a particular app from its context. However, I can't seem to find a straight answer on how I can transform the existing code to use the prefix. The documentation (https://tailwindcss.com/docs/configuration) shows how to generate the "tw-" classes, but not how to modify the existing codebase to prepend this "tw-" prefix to the code itself. I have a lot of these classes and it isn't feasible to manually go through and add the "tw-" prefix to the existing classes. Am I missing something? How do I transform the existing codebase to use the generated class prefix without having to manually edit all tailwind classes myself?

Answer 1

1. Use a VCS so you can revert everything if it goes wrong
2. Find a list of all tailwind classes. You can scrape https://tailwind.build/classes if you do not find a better source. The following snippet already works pretty well:

   document.querySelectorAll("a.block").forEach(elem => {
       if (elem.innerText.startsWith(".")){
           console.log(elem.innerText);
       }
   });
   

3. Build a script that iterates over all class names and runs a recursive search-and-replace on your codebase
4. Review the diff and test your project thoroughly before committing