如何为已有 tailwind 项目增加前缀？

Grow in 掘金插件曾经遇到一个问题：意外干扰沸点选择圈子菜单的展示。排查发现是根节点下的 Modal 组件将样式带出，由于 class 重名导致全局样式污染。

根本的解决方法是将 Modal 组件封进 Web Component，但 HeadlessUI 目前并没有一个好的解决方案。为了快速修复问题，决定暂时从「避免全局样式污染」的方向解决。

tailwindcss 可能引发污染的有两部分：

1. base layer 中的 Preflight，用 modern-normalize 来消除跨浏览器的不一致性
2. 不带前缀的 utility class

对于第一部分，关闭 Preflight 避免生成 normalize 相关的 CSS

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  }
}

对于第二部分，要为 tailwind classes 加上前缀。tailwind 配置中可以设置 prefix。但在已有大量代码的项目中，还要批量替换掉模板中已有的 classes 代码。

tailwind 对模板内容做正则匹配（prefix也是匹配的一部分），提取出所有可能是类名的字符串，最终生成只包含这些原子 class 的样式表。整个流程 tailwind 处理的对象始终是 css，无权对 css 之外的代码做修改。

tailwind 的工作机制决定了替换模板无法在编译打包中完成，那只能写个脚本一次性替换了。脚本的工作无非是匹配模版中的所有 class，再替换为 ${prefix}${class}，这不正好和 tailwind 干的活类似么，如果能直接调用 tailwind 的提取器问题便能迎刃而解。