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

Question

我的申请由两部分组成：

• (

  A

  ) 遗留应用程序 (AngularJs) 具有自己的 CSS 类。
• (

  B

  )

  div

  包含一个全新的应用程序 (React)。

  B

  使用 webpack、postcss 和 Tailwind 构建。

我能否确保

B

的 Tailwind 类不受

A

样式表的影响，反之亦然，而不会对代码库进行任何重大更改？

糟糕的解决方案

我目前发现了两种可能的解决方案，需要进行很大的改变：

1. 我知道 Tailwind 有一个 prefix 配置选项，但我不想为数千个类添加前缀（特别是考虑到前缀比类名本身长）。
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

   文件中的存在找到类，然后将它们从输出类列表中删除，但它们不允许重命名。

我特别发现最关键的缺失功能似乎是

*.js

文件解析器

purgecss

。似乎还没有其他解决方案能够做到这一点。

未解决的问题

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

Answer 1

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

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

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

// tailwind.config.js

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

tailwind 文档在这里

Answer 2

您可能想尝试使用此加载程序以及 tailwind 前缀配置tailwind-classname-prefix-loader

Answer 3

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

module.export = {
  prefix: "-"
}

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

Answer 4

您可以使用 tailwind 前缀，而无需在源代码中使用前缀。

1. 首先修改tailwind的类提取器：

   常量提取器=（内容）=> { 返回 defaultExtractor(content).map((cls) => 'tw-' + cls) }

   /** @type {import('tailwindcss').Config} */ 模块. 导出 = { 内容： { 提炼： { ts：提取器， tsx：提取器， mdx：提取器 } } }

2. 使用react-beyond，一个higher-order高阶组件库将前缀附加到整个react树中的所有类名（不仅仅是针对特定组件）。您可以从画廊源代码中获得灵感：https://react-beyond.github.io/docs/gallery/classfor