Global CSS
Import a global stylesheet once in the root layout to apply site-wide styles.
Syntax
import './globals.css'; // in app/layout.tsxFor truly global styles — resets, CSS variables, base typography — use a normal .css file and import it in your root layout. Global CSS can only be imported in a layout or the app entry, not scattered across components.
Example
/* app/globals.css */
:root { --brand: #0070F3; }
body { margin: 0; font-family: system-ui; }
// app/layout.tsx
import './globals.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}When to use it
- A team imports a CSS reset once in app/layout.tsx so it applies consistently across all pages.
- A design system's base typography and colour variables are defined in globals.css and imported in the root layout.
- A third-party component library stylesheet is imported once in the root layout instead of duplicated in every page.
More examples
Import global CSS in root layout
Importing globals.css once in the root layout applies the styles to every page in the application.
// app/layout.tsx
import './globals.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return <html><body>{children}</body></html>;
}CSS custom properties in globals
Global CSS is the right place for CSS variables and base resets that every component relies on.
/* app/globals.css */
:root {
--color-primary: #0070f3;
--font-size-base: 16px;
}
body {
font-size: var(--font-size-base);
color: #333;
margin: 0;
}Import third-party stylesheet
Importing node_modules stylesheets alongside globals.css bundles them into the single global CSS file.
// app/layout.tsx
import 'react-toastify/dist/ReactToastify.css';
import './globals.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return <html><body>{children}</body></html>;
}
Discussion