How To Use Tailwind Scoped Css Styles With Vue

In this post I'll show why and how you can use scoped styles with Tailwind and Vue.

Why

Using scoped CSS could save you from styling conflicts such as a naming clash where there are multiple classes with the same name, as shown in the example below.

How

Vue makes using converting a component to use scoped styles with Tailwind easy thanks to single file components!

Before

<template>
  <button
    class="border border-green-500 bg-green-500 text-white rounded-md px-4 py-2 m-2"
  >
    I use Tailwind classes
  </button>
</template>

After

and this is what it looks like using scoped styles

<template>
  <button class="button">I use scoped Tailwind classes</button>
</template>

<style lang="postcss" scoped>
.button {
  @apply border border-green-500 bg-green-500 text-white rounded-md px-4 py-2 m-2;
}
</style>

The repository for the demo can be found here.

Alternatives

Another approach worth considering is to use a prefix with Tailwind