我在同一个 Angular 项目中使用 Tailwind CSS 和 Bootstrap (ngx-bootstrap)。大多数情况下，他们相处得很好。然而，当涉及到填充和边距时，它们就像兄弟姐妹一样互相争斗。我想使用 Tailwind 进行填充，因为它是一致的。例如，班级p-X是 X 乘以 0.25 rem，但是有了 bootstrap，它就到处都是了。烦人的是 Bootstrap 把!important到处。
utilities.css来自 Tailwind 和_spacing.scss来自引导程序。
有没有方便的方法来解决这个问题？
避免与 Tailwind 实用程序类命名冲突的最佳实践是使用prefix option https://tailwindcss.com/docs/configuration#prefix在你的tailwind.config.js https://tailwindcss.com/docs/configuration file.
module.exports = {
prefix: 'tw-',
}
但如果你只想放!importantTailwind 类的规则，并且您已经控制了 css 代码的顺序（tailwind 类是最后一个），您可以设置important option https://tailwindcss.com/docs/configuration#important在 tailwind 配置文件中设置为 true。
module.exports = {
important: true,
}
当您选择设置顺风类别时，请确保不要覆盖顺风类别important仅选项，请参阅CSS 的优先顺序是什么？ https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
