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.
Other CSS Options
| Example | Plugin | Tutorial | |
|---|---|---|---|
| Sass | example | plugin | tutorial |
| Tailwind | tutorial | ||
| Postcss | plugin | tutorial | |
| Emotion | example | plugin | tutorial |
| Styled Components | example | plugin | tutorial |
| Less | plugin | ||
| Styled JSX | example | plugin | |
| Stylus | example | plugin |