# How To Use Tailwind Scoped Css Styles With Vue

By Jag Reehal, 2021-01-19. Canonical: https://arrangeactassert.com/posts/how-to-use-tailwind-scoped-css-styles-with-vue/

<!-- Excerpt Start -->

In this post I'll show why and how you can use scoped styles with [Tailwind](https://tailwindcss.com/) and [Vue](https://vuejs.org/).

<!-- Excerpt End -->

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

<iframe class="iframe-example h-96" src="https://jagreehal.github.io/vue-tailwind-scoped-styles/"></iframe>

## How

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

Before

```html
<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

```html
<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.](https://github.com/jagreehal/vue-tailwind-scoped-styles)

## Alternatives

Another approach worth considering is to use a [prefix with Tailwind](/posts/using-tailwind-consider-a-using-a-prefix/)