使 Tailwind 类非全局（自动！）

Question

我有一个由两部分组成的应用程序：

• (A) 具有自己的 CSS 类的旧版应用程序 (AngularJs)。
• (B) div 包含一个全新的应用程序 (React)。 B 使用 webpack、postcss 和 Tailwind 构建。

我能否确保B 的 Tailwind 类不受A 的样式表的影响，反之亦然，而不会对代码库进行任何重大更改？

糟糕的解决方案

我目前发现了两种可能需要大改动的解决方案：

1. 我知道 Tailwind 有一个 prefix config option，但我不希望直接为数千个类添加前缀（特别是考虑到前缀比类名本身长）。
2. 将css-modules 与本地导入一起使用。我也不喜欢这种方法，因为：
   • (i) 我不确定 Tailwind 的效果如何，并且
   • (ii) 即使它有效，我宁愿不必从各种地方本地导入，因为它使事情变得更加冗长：
     • 例如className="x" ... className="y" 变为：
       • import s1 from 's1'; import s2 from 's2'; ... className="s1.x" ... className="s2.y"

更相关的方法

我找到了另外两个相关的 postcss 插件，但它们都不够用：

1. postcss-rename 很棒，但它不能修复 *.js 文件中的名称。
2. purgecss 可以根据它们在*.js 文件中的存在来查找类，然后将它们从输出类列表中删除，但它们不允许重命名。

我特别发现最关键的缺失功能似乎是the *.js file parser of purgecss。似乎还没有其他解决方案能够做到这一点。

未解决的问题

还是我错了？是否有任何解决方案可以将自定义转换（例如重命名）应用于所有 postcss 类，这些类也应用于 HTML/JSX 元素的输出类名称？或者有没有其他方法可以让 webpack 自动让我的 CSS 类对我来说不冲突？

Answer 1

你可以使用tailwind的prefix选项

前缀选项允许您为 Tailwind 生成的所有实用程序类添加自定义前缀。在可能存在命名冲突的现有 CSS 之上分层 Tailwind 时，这非常有用。

例如，您可以通过设置前缀选项来添加 tw- 前缀，如下所示：

// tailwind.config.js

module.exports = {
  prefix: 'tw-',
}

tailwind docs here