Careeroza
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.