使 Tailwind 类非全局（自动！）

Question

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

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

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

糟糕的解决方案

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

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

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

未解决的问题

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

Answer 1

您可以使用尾风的前缀选项

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

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

// tailwind.config.js

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

顺风文档在这里

Answer 2

你可能想试试这个加载器和顺风前缀配置tailwind-classname-prefix-loader

Answer 3

您可以尝试使用连字符来防止长类名

module.export = {
  prefix: "-"
}

对于我的一个项目，它看起来更美观