Maybe I'm missing something but when I try to apply my own class to a v-btn the style doesn't show unless I add !important (which is a bad practice). How could I style just one component without using important?
<v-btn class="btn-add">
Add todo
</v-btn>
.btn-add {
height: 49px !important;
}````
@martinzeltin you can go more specific with your css to avoid the !important
eg:
section div ul li button.btn-add {
height: 49px;
}
best way to check what classes you need is to inspect your Dom and see which classes are overriding yours, and then get more specific with dom selector.
@automica but this wouldn't work with tailwind utility classes... :(
@martinzeltin but you didn’t mention tailwind.
Are you trying to override !important on tailwind?
@automica I am using Vuetify and I would like to apply tailwind classes to Vuetify's components, for example like this:
<v-btn class="bg-white rounded-lg p-6">Button</v-btn>
But these classes get ignored because they are not "important" enough. They are overwritten by Vuetify's own classes which seem to have greater importance.
You could always just replace vuetifys classes with tailwind ones.
Please or to participate in this conversation.