'why don't tailwind override locally defined style?

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>
javascriptcssvue.jswebpacktailwind-css


Solution 1:[1]

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

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abid
Solution 2

Related Questions