CSS Modules

A file ending in .module.css is a CSS Module. Its class names are made unique at build time, so .card in one component never clashes with .card in another.

.card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

.price {
  font-weight: 700;
  color: #16a34a;
}

// components/ProductCard.tsx
import styles from './ProductCard.module.css';

export default function ProductCard({ name, price }: { name: string; price: number }) {
  return (
    <div className={styles.card}>
      <h3>{name}</h3>
      <p className={styles.price}>₹{price}</p>
    </div>
  );
}