为什么不顺风而覆地重写本地定义的样式? [英] why don't tailwind override locally defined style?

问题描述

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

I am trying to change the default color of text by a tailwindcss stye. But I cant understood why it's not working. But Bootstrap does override the default style.

我只是tailwindcss的新手.有人可以告诉我这里发生了什么吗?

I am just new in tailwindcss. Can somebody tell me whats happening here?

您可以在此处在codeandbox中进行编辑

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

推荐答案

问题出在我的 tailwind.config.js 文件中.只是在阅读文档时发现的.

The problem is with my tailwind.config.js file. Just found this during reading the documentation.

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

By default all css of tailwind generated without !important. To enable that you have to add important: true in the config file. Then it will override previous class properties.

// tailwind.config.js

module.exports = {
  important: true,
}

这篇关于为什么不顺风而覆地重写本地定义的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！