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

z9zf31ra 于 2023-01-05 发布在 Webpack

关注(0)|答案(2)|浏览(189)

我正在尝试用tailwindcss的样式来改变默认的文本颜色。但是我不明白为什么它不起作用。但是Bootstrap确实覆盖了默认的样式。
我是新来的，谁能告诉我这里发生了什么事？
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>

webpack

来源：https://stackoverflow.com/questions/62606861/why-dont-tailwind-override-locally-defined-style

2条答案

按热度按时间

rt4zxlrg1#

问题出在我的tailwind.config.js文件上。刚刚在阅读文档时发现了这个问题。
默认情况下，tailwind的所有css都不包含!important。要启用它，你必须在配置文件中添加important: true。然后它将覆盖以前的类属性。

// tailwind.config.js

module.exports = {
  important: true,
}

赞(0）回复(0）举报 2023-01-05

3yhwsihp2#

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

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

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

赞(0）回复(0）举报 2023-01-05

我来回答

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

2条答案

相关问题

热门标签

最新问答