why don't tailwind override locally defined style?

user_6800325 0
Viewed 10388

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.

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

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>
tailwind-css vue.js webpack css javascript
2 Answers

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

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,
}
user_68003250

I would suggest to use the Important modifier as described in the docs.

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

In order to use the Important modifier, you need to enable the JIT mode.

user_23033340
Related