Next.js Styling Options

Next.js does not force you to use one specific styling method. You have several options, and you can even mix them in the same project. Each approach suits different team sizes, project types, and personal preferences. Understanding the trade-offs helps you pick the right tool for your situation.

Option 1: Global CSS

Global CSS is a plain .css file that applies styles to your entire app. Import it once in your root layout and all pages receive those styles.

/* app/globals.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  color: #333;
}

h1 {
  font-size: 2rem;
}

// app/layout.js
import './globals.css';

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

Global CSS is the simplest approach. The downside is that class names apply everywhere. A class named .button in one file affects every element with that class across the entire app.

Option 2: CSS Modules

CSS Modules scope styles to a single component. Class names get automatically renamed to unique strings so they never clash with other files. A .button in one file and a .button in another file become completely different classes.

/* app/components/Button.module.css */
.button {
  background: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
}

.button:hover {
  background: darkblue;
}

// app/components/Button.js
import styles from './Button.module.css';

export default function Button({ label }) {
  return <button className={styles.button}>{label}</button>;
}

DIAGRAM: CSS Modules Scoping

Button.module.css  .button  →  becomes  .button_abc123
Card.module.css    .button  →  becomes  .button_xyz789

No conflict. Each component gets its own unique class name.

Option 3: Tailwind CSS

Tailwind CSS is a utility-first CSS framework. You style elements directly in your HTML using small, single-purpose class names instead of writing separate CSS files. Most new Next.js projects use Tailwind because it is fast to write and produces small CSS files in production.

export default function Card({ title, description }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow">
      <h2 className="text-xl font-bold text-gray-900 mb-2">{title}</h2>
      <p className="text-gray-600 leading-relaxed">{description}</p>
    </div>
  );
}

TAILWIND CLASS BREAKDOWN:
bg-white           → background: white
rounded-lg         → border-radius: 8px
shadow-md          → medium box shadow
p-6                → padding: 24px (6 × 4px)
hover:shadow-xl    → larger shadow on hover
transition-shadow  → animate the shadow change
text-xl            → font-size: 1.25rem
font-bold          → font-weight: 700
text-gray-900      → very dark gray text
mb-2               → margin-bottom: 8px
text-gray-600      → medium gray text
leading-relaxed    → comfortable line height

Option 4: CSS-in-JS

Libraries like styled-components and Emotion let you write CSS inside your JavaScript files. Styles live right next to the component logic they style.

// Using styled-components (requires setup for Next.js App Router)
import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;

  &:hover {
    background: darkblue;
  }
`;

export default function Page() {
  return <Button>Click me</Button>;
}

CSS-in-JS libraries require extra configuration in Next.js App Router because they need to work with server components. Check the library's documentation for the current Next.js setup guide.

Option 5: Sass

Sass extends CSS with variables, nesting, and other features. Next.js supports Sass out of the box — install the sass package and rename your CSS files to .scss.

npm install sass

/* app/components/Card.module.scss */
$primary: #0070f3;
$radius: 8px;

.card {
  border-radius: $radius;
  padding: 24px;

  &:hover {
    border-color: $primary;
  }

  .title {
    color: $primary;
    font-size: 1.5rem;
  }
}

Comparing the Options

METHOD          SCOPE        LEARNING CURVE   BEST FOR
──────────────────────────────────────────────────────────────
Global CSS      Global       Low              Base styles, resets
CSS Modules     Component    Low              Most components
Tailwind CSS    Utility      Medium           Fast development
CSS-in-JS       Component    Medium           Dynamic, theme-heavy
Sass/SCSS       Global/Comp  Low-Medium       Complex stylesheets

Combining Methods

You do not have to pick just one. Many projects combine approaches.

COMMON COMBINATION:
Global CSS   → reset styles, typography defaults
Tailwind CSS → layout, spacing, color utilities
CSS Modules  → complex component-specific styles that Tailwind cannot handle cleanly

Key Takeaway

Use global CSS for base styles that apply everywhere. Use CSS Modules to scope styles to individual components and avoid class name conflicts. Use Tailwind CSS to style directly in your components quickly without writing separate files. All these options work in Next.js with zero or minimal configuration. Choose what fits your project and team, and mix approaches where it makes sense.

Previous lessons
Back to courses
Next lessons

Leave a Comment