I think it's very unlikely that your custom CSS overrides Tailwind utilities by accident. Maybe when using another CSS Framework? Which I really don't recommend. But there's probably a way to prefix Tailwind in that case.
Why is it unlikely? It's more than likely unfortunately due to the way CSS works.
Any CSS selectors declared after @tailwind utilities; will have a higher specificity.
When you import your global tailwind css it's imported before all the css that's inside your single file components.
The only option I've found is to either enable !important tags in tailwind config or adding a prefix to the utilities. This requires you to add a custom id to a wrapper div when Vue loads - tailwindcss.com/docs/plugins/#pref...
I just have a hard time picturing your use case. Why would you override Tailwind utility classes?
Do you have a GitHub repo to showcase your use case? Are you using Tailwind with another CSS framework?
You wouldn't want to override Tailwind utility classes. The way you suggested to import Tailwind in the article will cause single file components using scoped css to override the classes. This is due to the way css specificity works.
If you add a Tailwind utility class to a div in a single file component using the way you've set it up e.g <div class="bg-red-500"></div> and then add a scoped css declaration in that file e.g <div class="bg-red-500 some-div"></div> and...
The div will be blue instead of red due to the output becoming .some-div[data=32427] and that overriding .bg-red-500. Ideally you'd want to be able to write css for your components and override their styles with tailwind utility classes where you can.
Thanks for the post.
Any idea how to include
@tailwind utilities;after all your other css has been processed including your components CSS?If you don't do this then the utility classes will get overwritten by any css you declare in your components.
Hi! Glad to hear that my post was useful 😃
I think it's very unlikely that your custom CSS overrides Tailwind utilities by accident. Maybe when using another CSS Framework? Which I really don't recommend. But there's probably a way to prefix Tailwind in that case.
Hi Jerome,
Why is it unlikely? It's more than likely unfortunately due to the way CSS works.
Any CSS selectors declared after
@tailwind utilities;will have a higher specificity.When you import your global tailwind css it's imported before all the css that's inside your single file components.
The only option I've found is to either enable
!importanttags in tailwind config or adding a prefix to the utilities. This requires you to add a custom id to a wrapper div when Vue loads - tailwindcss.com/docs/plugins/#pref...I just have a hard time picturing your use case. Why would you override Tailwind utility classes?
Do you have a GitHub repo to showcase your use case? Are you using Tailwind with another CSS framework?
Hi Jerome,
You wouldn't want to override Tailwind utility classes. The way you suggested to import Tailwind in the article will cause single file components using scoped css to override the classes. This is due to the way css specificity works.
If you add a Tailwind utility class to a div in a single file component using the way you've set it up e.g
<div class="bg-red-500"></div>and then add a scoped css declaration in that file e.g<div class="bg-red-500 some-div"></div>and...The div will be blue instead of red due to the output becoming
.some-div[data=32427]and that overriding.bg-red-500. Ideally you'd want to be able to write css for your components and override their styles with tailwind utility classes where you can.I've just watched a video that reminded me of our conversation:
youtu.be/v74SZBVMPa0?t=615
Hi Jerome,
Thanks for following up, the layers feature is neat but a bit different use case to what we were talking about before.
Awesome to see how many features they’ve been adding recently though.