How To Use Tailwind Scoped Css Styles With Next.js

In this post I'll show why and how you can use scoped styles with Tailwind and Next.js.

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.

How

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 '.module.css' such as 'TailwindScopedComponent.module.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

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.

Alternatives

Another approach worth considering is to use a prefix with Tailwind