Global CSS

globals.css

Global styles (resets, CSS variables, base typography) go in app/globals.css and are imported once in the root layout.

:root {
  --brand: #2563eb;
  --text: #111827;
}

body {
  margin: 0;
  color: var(--text);
  font-family: system-ui, sans-serif;
}

a {
  color: var(--brand);
}
// app/layout.tsx
import './globals.css';

Rules

  • Global CSS can be imported in any file inside app/, but keep it to the root layout to avoid surprises.
  • Styles imported in a layout stay loaded while you navigate; they are not removed when the page changes.
  • Use global CSS for truly global things only. Component styles belong in CSS Modules or Tailwind classes.