使 Tailwind 类成为非全局类（自动！）

Question

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

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

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

糟糕的解决方案

我目前发现两种可能的解决方案需要进行重大更改：

1. 我知道 Tailwind 有一个前缀配置选项，但我不想为数千个类添加前缀（特别是考虑到前缀比类名本身长）。
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文件中的存在找到类，然后将它们从输出类列表中删除，但它们不允许重命名。

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

未解决的问题

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

Answer 1

您可以使用 tailwind 的前缀选项

\n

\n

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

\n

\n

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

\n

// tailwind.config.js\n\nmodule.exports = {\n  prefix: \'tw-\',\n}\n

\n

顺风文档在这里

\n