Global Styles

Global styles can be imported into any layout, page, or component inside the app directory.

Good to know: This is different from the pages directory, where you can only import global styles inside the _app.js file.

For example, consider a stylesheet named app/global.css:

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;

Inside the root layout (app/layout.js), import the global.css stylesheet to apply the styles to every route in your application:

// These styles apply to every route in the application
import './global.css';

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