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:

function Card({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="rounded-lg border bg-white p-6 shadow-sm dark:bg-gray-900 dark:border-gray-800">
      <h2 className="text-xl font-bold mb-4">{title}</h2>
      <div className="text-gray-600 dark:text-gray-300">{children}</div>
    </div>
  );
}

Common Tailwind Utilities

Category	Examples
Spacing	p-4, m-2, px-6, mt-8, gap-4
Flexbox/Grid	flex, grid, items-center, justify-between
Typography	text-lg, font-bold, text-gray-600
Colours	bg-blue-500, text-white, border-gray-200
Responsive	sm:, md:, lg:, xl:, 2xl:
Dark mode	dark:bg-gray-900, dark:text-white

---

shadcn/ui

shadcn/ui is not a component library you install — it is a collection of copy-paste components built on Radix UI and Tailwind:

# Initialise shadcn/ui in your project
npx shadcn@latest init

# Add individual components
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

function Dashboard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome Back</CardTitle>
        <CardDescription>Here is your daily summary.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>You have 3 new notifications.</p>
        <Button>View All</Button>
      </CardContent>
    </Card>
  );
}

Why shadcn/ui?

Feature	shadcn/ui	Typical library (e.g. MUI)
Installation	Copy into your project	npm install
Customisation	Full control — it is your code	Override via API/themes
Bundle size	Only what you use	Often larger
Accessibility	Radix UI primitives	Varies
Styling	Tailwind CSS	CSS-in-JS / custom

---

Responsive Design

Tailwind's responsive prefixes make mobile-first design straightforward: