# How To Use Tailwind Scoped Css Styles With Svelte

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

<!-- Excerpt Start -->

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

<!-- 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/svelte-tailwind-scoped-styles/"></iframe>

## How

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

Before

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

After

and this is what it looks like using scoped styles

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

<style lang="postcss">
  .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/svelte-tailwind-scoped-styles)

## Alternatives

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