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

ExamplePluginTutorial
Sassexampleplugintutorial
Tailwindtutorial
Postcssplugintutorial
Emotionexampleplugintutorial
Styled Componentsexampleplugintutorial
Lessplugin
Styled JSXexampleplugin
Stylusexampleplugin