What are CSS Modules and how do they prevent class names from clashing between components?

A CSS Module is a regular CSS file where every class name is automatically made unique behind the scenes during the build process, so a class name like button used in one component's CSS file never accidentally conflicts with a class of the same name used in a completely different component.

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

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

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