CSS Styling with Tailwind & CSS Modules

In Next.js you often combine global CSS for resets, CSS Modules for scoped component styles, and Tailwind utility classes for speed.

Three common styling approaches

In Next.js you often combine global CSS for resets, CSS Modules for scoped component styles, and Tailwind utility classes for speed.

Import global CSS only from the root layout. CSS Modules can be imported into any component file.

Real-life example: Global CSS is house paint on all walls. CSS Modules are room-specific wallpaper. Tailwind is stickers you place exactly where you need them.

Global CSS — base styles, resets, font defaults
CSS Modules — class names scoped to one file
Tailwind — utility classes in JSX (className)

Global CSS example

Create app/globals.css and import it in app/layout.tsx. Those rules apply across the whole app.

Real-life example: globals.css is the school dress code — everyone follows the same basic rules before adding personal style.

app/globals.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f8fafc;
  color: #0f172a;
}

a {
  color: #0369a1;
}

Import in app/layout.tsx

import "./globals.css";
import type { ReactNode } from "react";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

CSS Modules example

Name a file like Card.module.css. Import styles as an object. Next.js makes class names unique so they do not clash with other components.

Real-life example: CSS Modules are name tags at a conference — two people can both be called "title" without confusion because each badge is unique.

components/Card.module.css

.card {
  padding: 1rem;
  border-radius: 8px;
  background: white;
  border: 1px solid #e2e8f0;
}

.title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

components/Card.tsx

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

export function Card() {
  return (
    <article className={styles.card}>
      <h2 className={styles.title}>Rishtaara Card</h2>
      <p>Scoped styles with CSS Modules.</p>
    </article>
  );
}

Tailwind utility example

With Tailwind configured, you style directly in className. This is fast for layouts and common UI patterns.

Real-life example: Tailwind classes are like Lego stud sizes printed on each brick — snap padding, color, and flex without opening a separate paint can.

Tip: You can mix approaches — Tailwind for layout speed, CSS Modules for complex unique components, global CSS for resets.

Tailwind in a Server Component

export default function Hero() {
  return (
    <section className="mx-auto max-w-3xl px-4 py-16">
      <h1 className="text-4xl font-bold text-slate-900">
        Learn Next.js on Rishtaara
      </h1>
      <p className="mt-4 text-lg text-slate-600">
        Build fast pages with App Router and Tailwind CSS.
      </p>
      <button className="mt-6 rounded-lg bg-sky-600 px-4 py-2 text-white">
        Start learning
      </button>
    </section>
  );
}