如何解决 Angular 项目中的 Tailwind 和 Bootstrap 冲突

【问题标题】：How to resolve Tailwind and Bootstrap conflicts in an Angular project如何解决 Angular 项目中的 Tailwind 和 Bootstrap 冲突
【发布时间】：2022-06-11 07:14:58
【问题描述】：

我在同一个 Angular 项目中使用 Tailwind CSS 和 Bootstrap (ngx-bootstrap)。在大多数情况下，他们相处得很好。然而，当涉及到填充和边距时，它们就像兄弟姐妹一样战斗。我想使用 Tailwind 进行填充，因为它是一致的。例如，p-X 类是 X 乘以 0.25 rem，但使用引导程序，它无处不在。烦人的是，Bootstrap 到处都放!important。

utilities.css 来自 Tailwind，_spacing.scss 来自 Bootstrap。

有没有方便的方法来解决这个问题？

【问题讨论】：

标签： bootstrap-4 tailwind-css

【解决方案1】：

避免与 Tailwind 实用程序类发生命名冲突的最佳做法是在您的 tailwind.config.js 文件中使用 prefix option。

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

但是如果你只想为 Tailwind 类设置 !important 规则，并且你已经控制了 css 代码的顺序（tailwind 类在最后），你可以在 tailwind 配置文件中将 important option 设置为 true .

module.exports = {
  important: true,
}

当您选择仅设置 important 选项时，让 sur 不覆盖顺风类，请参阅 What is the order of precedence for CSS?

【讨论】：