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

Question

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

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

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

Answer 1

避免与 Tailwind 实用程序类命名冲突的最佳实践是在文件上使用prefix选项tailwind.config.js。

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

但是，如果您只想为 Tailwind 类添加!important规则，并且您已经控制了 css 代码的顺序（tailwind 类是最后一个），则可以在 tailwind 配置文件上将该important选项设置为 true。

module.exports = {
  important: true,
}

important当您选择仅设置选项时，请确保不要覆盖 tailwind 类，请参阅CSS 的优先级顺序是什么？