How To Use Tailwind Scoped Css Styles With Svelte21 Jan 2021
In this post I'll show why and how you can use scoped styles with Tailwind and Svelte.
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.
Svelte makes using converting a component to use scoped styles with Tailwind easy thanks to single file components!
class="border border-green-500 bg-green-500 text-white rounded-md px-4 py-2 m-2"
I use Tailwind classes
and this is what it looks like using scoped styles
<button class="button">I use scoped Tailwind classes</button>
@apply border border-green-500 bg-green-500 text-white rounded-md px-4 py-2 m-2;
The repository for the demo can be found here.
Another approach worth considering is to use a prefix with Tailwind