What are CSS Modules and how do you use them in Next.js?

CSS Modules are CSS files whose class names are scoped locally to that file. You create one by giving the file a .module.css extension, and Next.js supports them with no setup.

/* Button.module.css */
.primary {
  background-color: blue;
  color: white;
}

// Button.js
import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click me</button>;
}

Importing the file gives you an object, and styles.primary holds a generated, unique class name. Two module files can both define .primary without a naming collision, because each one gets its own class in the build.

You can import a CSS Module into any component in both the App Router and the Pages Router. Use them for component-specific styles when Tailwind utilities are not enough.