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

Question

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

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

在这里你可以在代码和框中编辑

<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>

Answer 1

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

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

// tailwind.config.js

module.exports = {
  important: true,
}

Answer 2

我建议使用文档中描述的重要修饰符。

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

为了使用Important修饰符，您需要启用JIT模式。