Next.js Styling Explained — CSS Modules Tailwind and CSS-in-JS

In this tutorial, you will learn about Next.js Styling Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Next.js supports multiple styling approaches out of the box: CSS Modules for component-scoped styles, Tailwind CSS for utility-first design, and global CSS for app-wide styles.

What You'll Learn

• CSS Modules with .module.css
• Tailwind CSS setup and usage
• Global styles in app/layout.js
• CSS-in-JS libraries
• CSS variables for theming

Why It Matters

Next.js supports all major styling approaches without configuration. CSS Modules provide scoping, Tailwind enables rapid prototyping, and global styles work for resets and themes.

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

.primary {
  composes: button;
  background: #0070f3;
  color: white;
}

.secondary {
  composes: button;
  background: transparent;
  border: 1px solid #0070f3;
  color: #0070f3;
}

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

export default function Button({ children, variant = "primary" }) {
  return (
    <button className={styles[variant]}>
      {children}
    </button>
  );
}

// app/globals.css
:root {
  --primary: #0070f3;
  --secondary: #0070f3;
  --background: #ffffff;
  --foreground: #171717;
}

Expected output: CSS Modules scope styles to components, Tailwind classes work globally, and CSS variables enable consistent theming.