Discussion on: How to add Tailwind to your Vue app

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...

<style scoped>
.some-div {
  @apply bg-blue-500;
}
</style>

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.