如何解决 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

option 设置为 true文件。

module.exports = {
  important: true,
}

当您选择仅设置

important

选项时，确保不要覆盖 tailwind 类，请参阅CSS 的优先级顺序是什么？

Answer 2

当您同时使用bootstrap和tailwind-css时，您将面临命名冲突，从而导致未定义的行为，

有两种方法可以克服。

第一种方法是通过在您的中使用

prefix option

来解决

tailwind.config.css

文件

 // tailwind.config.js
    module.exports = {
       prefix: 'tw-',
    }

所以现在你可以在 tailwind-css 的类名之前使用前缀

tw-

，这不会破坏任何现有的样式。

如果您在更改总体更改时遇到问题，因为将
```
tailwind-css
```
添加到现有
```
bootstrap
```
项目中，最好使用 tailwind-css 的
```
preflight
```
。

他们的项目中默认使用预检，这是一组固执己见的基本样式。

这是建立在现代标准化之上的

Tailwind 会自动将这些样式注入

@tailwind base

。

因此要克服这个问题。从 css 文件中删除

@tailwind base

或添加

preflight: false,

module.exports = {
   corePlugins: {
      preflight: false,
   }
}

希望有帮助！

Answer 3

您可以使用 Prefix，通过最新更新的 Tailwind，您也可以使用 CDN 来做到这一点。

请参考此链接：https://developerwings.com/tailwind-and-bootstrap-together/

Answer 4

接受的答案是正确的，但为 Tailwind 类设置

!important

规则并不总是理想的。因为将

important

设置为

true

可能会在合并向元素添加内联样式的第三方 JS 库时引入一些问题。在这些情况下，Tailwind 的

!important

实用程序会击败内联样式，这可能会破坏您的预期设计。

要解决此问题，您可以将

important

设置为 ID 选择器，例如

#app

：

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  important: '#app',
}

此配置将为您的所有实用程序添加给定选择器的前缀，从而有效地提高它们的特异性，而无需实际使它们

!important

。

在

important

文件中指定

tailwind.config.js

选择器后，您需要确保站点的根元素与其匹配。使用上面的示例，我们需要将根元素的

id

属性设置为

app

才能使样式正常工作。

配置完成并且根元素与 Tailwind 配置中的选择器匹配后，Tailwind 的所有实用程序都将具有足够高的特异性来击败项目中使用的其他类，而不会干扰内联样式：

<html>
<!-- ... -->
<style>
  .high-specificity .nested .selector {
    color: blue;
  }
</style>
<body id="app">
  <div class="high-specificity">
    <div class="nested">
      <!-- Will be red-500 -->
      <div class="selector text-red-500"><!-- ... --></div>
    </div>
  </div>

  <!-- Will be #bada55 -->
  <div class="text-red-500" style="color: #bada55;"><!-- ... --></div>
</body>
</html>

重要修改器

或者，您可以通过在开头添加

字符来使任何实用程序变得重要：

<p class="!font-medium font-bold">
  This will be medium even though bold comes later in the CSS.
</p>

这在极少数情况下非常有用，在这种情况下，您需要提高特异性，因为您与某些您无法控制的样式发生冲突。

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

问题描述投票：0回答：4

4个回答

最新问题

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

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4