Global CSS

Global CSS applies site-wide — resets, base typography, CSS custom properties, and third-party library styles. This lesson covers where and how to set it up correctly in the App Router.

One Global Stylesheet, Imported at the Root

Global CSS files (regular .css files, not .module.css) should be imported exactly once, in your root layout.tsx, so their styles apply consistently across every route in the app. Importing the same global stylesheet in multiple files can cause duplicate style injection and is unnecessary.

create-next-app scaffolds a globals.css file by default, already imported in the generated root layout, as a starting point for resets and base styles.

/* app/globals.css */
:root {
  --color-primary: #0070f3;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

// app/layout.tsx
import "./globals.css";

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

This single import makes globals.css's rules apply to every route rendered inside the root layout.

Global CSS Import Rules

// Correct: import once, in the root layout
import "./globals.css";

// Avoid: importing the same global file again elsewhere
// import "../../globals.css"; // in some other component

Import global stylesheets only in the root layout, not in individual pages or components.
Global CSS files can only be imported from within app/ (or a similarly configured location), not from deep inside node_modules-style paths.
CSS custom properties (--variable-name) defined globally are usable from any component's styles, including CSS Modules.
Third-party library stylesheets (like a component library's CSS) are also typically imported globally, once.

Global CSS Cheat Sheet

What belongs in a global stylesheet.

Content Type	Belongs in Global CSS?
CSS resets (`* { box-sizing: border-box; }`)	Yes
Base typography (`body`, `h1`-`h6`)	Yes
CSS custom properties / design tokens	Yes
Component-specific styles	No — use CSS Modules instead
Third-party library CSS imports	Yes, typically

Using CSS Custom Properties as Design Tokens

Defining colors, spacing, and other design values as CSS custom properties in globals.css gives you a single source of truth usable from any stylesheet in the project, including CSS Modules and even inline styles via style={{ color: "var(--color-primary)" }}.

/* globals.css */
:root {
  --color-primary: #0070f3;
  --spacing-md: 16px;
}

/* Button.module.css */
.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
}

Keeping Global CSS Small and Intentional

It's tempting to keep adding component-specific rules to globals.css because it's the first stylesheet you set up, but doing so reintroduces the exact naming collision problems CSS Modules exist to solve. Keep global CSS limited to genuinely site-wide concerns.

Common Mistakes

Importing globals.css (or any global stylesheet) in more than one file.
Adding component-specific styles to globals.css instead of using CSS Modules.
Not defining CSS custom properties for colors/spacing, leading to repeated magic values across stylesheets.
Forgetting that global CSS class names are not scoped and can collide across components.

Key Takeaways

Global CSS should be imported exactly once, in the root layout.
It's the right place for resets, base typography, and CSS custom properties.
Component-specific styles belong in CSS Modules, not global CSS, to avoid collisions.
CSS custom properties defined globally are usable from any other stylesheet in the project.
Keep global CSS intentionally small to avoid reintroducing global naming conflicts.

Pro Tip

Treat globals.css as a design tokens file first (colors, spacing, typography scale as custom properties) and a resets file second — resist the urge to add one-off component rules there, even when it feels like the fastest path in the moment.