Tailwindcss - 自动将“tw-”前缀添加到现有代码库

Question

Tailwindcss 有明确的文档说明如何为所有 tailwind 类生成前缀，以更好地将特定应用程序的样式与其上下文隔离。但是，我似乎无法找到关于如何将现有代码转换为使用前缀的直接答案。文档（https://tailwindcss.com/docs/configuration）展示了如何生成“tw-”类，但没有展示如何修改现有代码库以将此“tw-”前缀添加到代码本身。我有很多这样的类，手动检查并向现有类添加“tw-”前缀是不可行的。我错过了什么吗？如何转换现有代码库以使用生成的类前缀，而无需自己手动编辑所有 Tailwind 类？

Answer 1

1. 使用 VCS，以便在出现问题时可以恢复所有内容
2. 查找所有顺风类别的列表。如果找不到更好的来源，您可以抓取https://tailwind.build/classes 。下面的代码片段已经运行得很好：

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

3. 构建一个迭代所有类名并在代码库上运行递归搜索和替换的脚本
4. 在提交之前检查差异并彻底测试您的项目