为什么不顺风覆盖本地定义的样式？答案

【问题标题】：why don't tailwind override locally defined style?为什么不顺风覆盖本地定义的样式？
【发布时间】：2020-10-17 18:29:59
【问题描述】：

我正在尝试通过 tailwindcss 样式更改文本的默认颜色。但我不明白为什么它不起作用。但是 Bootstrap 确实会覆盖默认样式。

我只是 tailwindcss 的新手。谁能告诉我这里发生了什么？

Here you can editd in codesandbox

<template>
  <div class="hello">
    <h1 class="origintxt text-green-400">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>


<style scoped>

.origintxt {
  color: black;
}

</style>

【问题讨论】：

您的示例运行良好。正如.origintxt 所声明的那样，文本显示为黑色。您实际上正在做相反的事情：由于特异性低，您正在用黑色覆盖默认的顺风颜色。这是顺风的设计。如果你只想要顺风类，那么不要用你自己的 css 覆盖样式
@Marco'Lubber'Wienkoop 感谢您的评论。但总的来说，最后一课总是覆盖前一课。这不会发生在这里。
不，课程顺序无关紧要。重要的是特异性，如果这与您的示例相同，则同一属性的最后一个定义获胜。
所以，订单是origintxt text-green-400还是text-green-400 origintxt都没有关系。结果是一样的。但是 codepen 在
尝试添加另一个类，比如origintxt2（无论以何种顺序）。现在在你的style 节点中声明这个新类。让那个附加类将颜色设置为红色。现在：如果您声明 before origintxt（在样式节点中），那么它将被忽略，因为 origintxt 中的黑色定义将覆盖它。但是如果你在 origintxt 之后声明它，那么它会变成红色。再说一遍：在您定义 origintxt 之前，外部 tailwind.css 已经包含在 codepen 中，并且因为它与 text-green-400 具有相同的特异性，所以它会覆盖它

标签： javascript css vue.js webpack tailwind-css

【解决方案1】：

问题出在我的tailwind.config.js 文件上。在阅读文档时发现了这一点。

默认情况下，所有顺风的 css 都没有!important 生成。要启用它，您必须在配置文件中添加important: true。然后它将覆盖以前的类属性。

// tailwind.config.js

module.exports = {
  important: true,
}

【讨论】：

呜呜这感觉很糟糕

【解决方案2】：

我建议按照文档中的说明使用Important modifier。

<template>
  <div class="hello">
    <h1 class="origintxt !text-green-400">{{ msg }}</h1>
  </div>
</template>

要使用重要修饰符，您需要enable the JIT mode。

【讨论】：