Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

Built-in CSS Support

Gatsby extends import so you can import CSS files directly into your components.

Gatsby automatically concatenates and minifies CSS and inlines them into the <head> of your HTML files for the fastest possible page load time.

Global CSS

CSS files with global styles like typography and colors are typically imported into the site’s gatsby-browser.js file.

Component-level CSS

We recommend using CSS Modules for component-level CSS. Gatsby has built-in support for CSS Modules.

CSS Modules let you write CSS normally but with more safety. The tool automatically generates unique class and animation names, so you don’t have to worry about selector name collisions.

An example of a component CSS Module file imported into its corresponding React component.

Learn more about CSS Modules

Other CSS Options

Styled Componentsexampleplugintutorial
Styled JSXexampleplugin

Start building today on Netlify!
Edit this page on GitHub
© 2023 Gatsby, Inc.