是否有任何功能可以从 NextJs 应用程序中删除所有顺风 css 类？

Question

我们在做像亚马逊这样的大项目。因此，两个分支使用 bootstrap 4. 现在在主分支中我们安装了 tailwind css 并且我还在 tailwind.config.js 中添加了内容路径。它工作完美...... 但是问题现在被顺风 类 覆盖了一些 bootstrap... 当我从 global.css 中删除 @tailwind 基础、组件、实用程序时，bootstrap 工作正常。但是在添加这些行之后又 bootstrap 不工作了，它来了一些顺风 类.

那么，现在我该如何解决呢？

Answer 1

您可以prefix all tailwind CSS 类 来消除命名冲突。

tailwind.config.js

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

您需要在代码库中更新 类 以反映前缀。

例如 - <div className="flex"> 现在是 <div className="tw-flex">

前缀仅添加到默认顺风 类。您需要手动为任何自定义添加前缀 类 或更改它们的名称以防止与其他框架发生冲突。

---

Tailwind 有一些基本样式，您可以通过禁用 preflight.

来忽略这些样式

tailwind.config.js

corePlugins: {
  preflight: false,
}