# How To Use Tailwind Scoped Css Styles With Next.js

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

<!-- Excerpt Start -->

In this post I'll show why and how you can use scoped styles with [Tailwind](https://tailwindcss.com/) and [Next.js](https://nextjs.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/nextjs-tailwind-scoped-styles/"></iframe>

## How

[CSS modules](https://github.com/css-modules/css-modules) provide the functionality to have scoped styles.

And the good news is Next.js supports css modules out of the box!

All you need to do is create a file that ends with '<em>.module.css'</em> such as '<em>TailwindScopedComponent.module.css</em>'

```css
.button {
  @apply border border-green-500 bg-green-500 text-white rounded-md px-4 py-2 m-2;
}
```

and then import it within your component

```js
import styles from './TailwindScopedComponent.module.css';

export default function Button() {
  return (
    <button className={styles.button}>I use scoped Tailwind classes</button>
  );
}
```

[The repository for the demo can be found here.](https://github.com/jagreehal/nextjs-tailwind-scoped-styles)

## Alternatives

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