Next.js CSS Modules

Next.js CSS Modules: Scoped Component Styling and Tailwind CSS

Next.js CSS Modules let you write standard CSS classes that stay scoped to a single component. Any file ending with .module.css automatically gets unique hashed class names at build time so styles never leak across components.

CSS Modules work in both Server Components and Client Components with zero extra runtime libraries. You can combine them smoothly with Tailwind CSS or global stylesheets.

Creating and Importing a CSS Module

Define your rules in a .module.css file next to your component, then import styles as a JavaScript object.

/* app/components/PricingCard.module.css */
.card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

.heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

// app/components/PricingCard.tsx
import styles from './PricingCard.module.css';

export default function PricingCard({ plan, price }: { plan: string; price: string }) {
  return (
    <div className={styles.card}>
      <h3 className={styles.heading}>{plan}</h3>
      <p className="mt-2 text-gray-600">{price} / month</p>
    </div>
  );
}

Combining CSS Modules with Tailwind CSS

Tailwind CSS comes pre-configured when you enable it in create-next-app. Use Tailwind utility classes for spacing and grid layout, and keep .module.css for complex animations or custom gradients.

// app/components/StatusNotice.tsx
export default function StatusNotice({ message }: { message: string }) {
  return (
    <div className="p-4 bg-emerald-50 border-l-4 border-emerald-500 text-emerald-900 rounded">
      <p className="font-medium">{message}</p>
    </div>
  );
}

Importing Global Stylesheets Safely

Global styles apply across the entire app, so import globals.css only inside your root app/layout.tsx file.

/* app/globals.css */
@import "tailwindcss";

body {
  font-family: system-ui, -apple-system, sans-serif;
  color: #111827;
}

Common Mistakes

• Using bare element selectors like p or h2 inside .module.css: CSS Modules only scope class and ID selectors; bare tag rules still apply globally.
• Writing hyphenated names and accessing them with dot notation: If you define .card-title, read it with styles['card-title'] or switch to camelCase .cardTitle.
• Importing globals.css inside nested pages: Import global CSS once in app/layout.tsx to avoid duplicate stylesheets.

Frequently Asked Questions

Do CSS Modules work inside React Server Components?

Yes, Next.js extracts .module.css files into static CSS bundles during build, so Server Components support them with zero client JavaScript.

Can I use Sass (.module.scss) in Next.js?

Yes, install the sass package as a dev dependency and rename your files to .module.scss or .module.sass.

Why did my CSS-in-JS library fail in a Server Component?

Runtime CSS-in-JS libraries that rely on React Context only run inside Client Components marked with 'use client'.