Styling & UI

Next.js supports multiple styling approaches out of the box. This lesson covers CSS Modules, Tailwind CSS, shadcn/ui, responsive design, dark mode, CSS variables, and choosing a component library.

---

CSS Modules

CSS Modules scope styles to a single component, preventing naming conflicts:

/* Button.module.css */
.button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
}

.primary {
  background-color: #3b82f6;
  color: white;
}

.secondary {
  background-color: #6b7280;
  color: white;
}

import styles from "./Button.module.css";

interface ButtonProps {
  variant?: "primary" | "secondary";
  children: React.ReactNode;
}

function Button({ variant = "primary", children }: ButtonProps) {
  return (
    <button className={`${styles.button} ${styles[variant]}`}>
      {children}
    </button>
  );
}

CSS Modules at a Glance

Advantage	Consideration
No class name collisions	One more file per component
Explicit dependencies	No dynamic class generation
Works with any CSS preprocessor	Slightly more verbose

---

Tailwind CSS

Tailwind is a utility-first CSS framework that ships with Next.js as a first-class option: