Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 703
Abid Avatar asked Jun 27 '20 06:06

Abid


People also ask

How do you override CSS Tailwind?

Due to the fact that the order of CSS class names in the class HTML attribute does not matter, the only way to override existing classes in an element is to remove all of the previous classes that clash with the new one.

Can I use custom CSS with Tailwind?

Using modifiers with custom CSS. Any custom styles you add to Tailwind with @layer will automatically support Tailwind's modifier syntax for handling things like hover states, responsive breakpoints, dark mode, and more.

Is Tailwind better than bootstrap?

Bootstrap is much larger than Tailwind and requires multiple files to access its full functionality. Because of this, using Bootstrap means a significantly larger file size than Tailwind. Bootstrap also offers mobile-first, responsive components pre-styled to create flawless website pages quickly.


Video Answer


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,
}
like image 82
Abid Avatar answered Oct 17 '22 02:10

Abid


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.

like image 25
Lucas Avatar answered Oct 17 '22 04:10

Lucas