# Using Tailwind? Consider adding a prefix

By Jag Reehal, 2021-01-19. Canonical: https://arrangeactassert.com/posts/using-tailwind-consider-a-using-a-prefix/

<!-- Excerpt Start -->

Tailwind is rightly receiving all the attention it deserves. Every developer I've introduced it to falls in love with working with CSS again!

On a recent Nuxt project, I noticed a potential issue when using Tailwind class names.

Suddenly '<em>bg-green-500</em>' didn't behave as expected, as an external component also using the same class had set the color to something else.

<!-- Excerpt End -->

![bg-color-500 clash](/static/gifs/bg-color-clash.gif)

Workarounds such as adding !important unnecessarily will get into specificity and wars that inevitably end in tears.

Another workaround could be to use @apply and scoped styles, CSS modules or CSS-in-JS, but you lose some of the developer experience Tailwind offers.

Using scoped styles with Tailwind is easy and you can read how to do that with [Vue](/posts/how-to-use-tailwind-scoped-css-styles-with-vue/ 'How To Use Tailwind Scoped Css Styles With Vue'), [Next.js](/posts/how-to-use-tailwind-scoped-css-styles-with-nextjs/ 'How To Use Tailwind Scoped Css Styles With Next.js') and [Svelte](/posts/how-to-use-tailwind-scoped-css-styles-with-svelte/ 'How To Use Tailwind Scoped Css Styles With Svelte').

## Adding a prefix to Tailwind

However the simplest thing could be is to set a <a href="https://tailwindcss.com/docs/configuration#prefix">prefix</a> in your Tailwind configuration file.

```js
module.exports = {
  prefix: 'tw-',
};
```

and then use the prefix for your tailwind classes so '<em>bg-green-500</em>' becomes '<em>tw-bg-green-500</em>'

```html
<button
  type="button"
  class="tw-border tw-border-green-500 tw-bg-green-500 tw-text-white tw-rounded-md tw-px-4 tw-py-2 tw-m-2"
>
  Success
</button>
```

You can see how to add a prefix below

![Using tailwind prefix](/static/gifs/using-prefix.gif)

Yes, there's still a chance of naming conflicts, but this is the best solution I can think of that keeps the awesome developer experience Tailwind with some level of safety without using @apply and scoped styles.

In my opinion, if you're building a component library in Tailwind, adding a prefix will save you and your users from styling conflicts.

If you're building a large app the earlier you start using a prefix the less headache you'll have of hunting down and changing Tailwind CSS classes later.