How To Use Tailwind Scoped Css Styles With Vue19 Jan 2021
In this post I'll show why and how you can use scoped styles with Tailwind and Vue.
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.
Vue 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
<style lang="postcss" scoped>
The repository for the demo can be found here.
Another approach worth considering is to use a prefix with Tailwind