使 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: "-"
}

對於我的一個項目，它看起來更美觀