Skip to main content

Global styles

We'll sooner or later want to add some global styles to our application. This is quite straightforward, so let's set this up straight away.

First, go to your global.css file in the root of the app folder.

src/app/global.css
* {
  box-sizing: border-box;
}

and import it in your layout.jsx like so:

layout.jsx
import './global.css'

export default function RootLayout({})
...

Now all elements in our application will have a box-sizing: border-box; CSS property, making them easier to work with.

This is, of course, a pretty basic example to get you started with global styles. You can make use of everything CSS has to offer. Usually you declare custom properties here which you can access in your components with the var() method.

Further reading​