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

Question

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

那么，现在我该如何修复它呢？

Answer 1

您可以为所有 tailwind CSS 类添加前缀以消除命名冲突。

tailwind.config.js

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

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

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

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

Tailwind 有一些基本样式，您可以通过禁用preflight来省略它们。

tailwind.config.js

corePlugins: {
  preflight: false,
}