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>
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.
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.
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.
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,
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With