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

Question

我在同一个 Angular 项目中使用 Tailwind CSS 和 Bootstrap (ngx-bootstrap)。在大多数情况下，他们相处得很好。然而，当谈到填充和边距时，他们就像 sibling 一样争吵。我想使用 Tailwind 进行填充，因为它是一致的。例如，p-X 类是 X 乘以 0.25 rem，但使用 bootstrap，它无处不在。令人恼火的是，Bootstrap 将 !important 放在各处。

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

有什么方便的方法可以解决这个问题吗？

Answer 1

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

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

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

module.exports = {
  important: true,
}

当您选择仅设置 important 选项时，确保不要覆盖 tailwind 类，参见 What is the order of precedence for CSS?