Styling

There are many ways to style your website. They can roughly be grouped into three styling approaches (Global CSS, Modular Stylesheets, CSS-in-JS), all of which Gatsby supports (in addition to CSS extensions).

Gatsby doesn’t have an opinion about which styling approach you choose. Almost every possible option is supported through official and community plugins.

 Main Guides 8

How to style with standard CSS

Global CSS is the traditional way to style a website. CSS rules are declared globally and styles are applied depending on specificity and inheritance.

How to style with CSS modules

CSS rules are written traditionally but consumed with JavaScript and scoped locally to avoid unintended side-effects elsewhere. Works out-of-the-box with Gatsby.

How to style with CSS-in-JS

Locally-scoped CSS written and consumed in JavaScript, enabling the easier use of dynamic styling and other features. Requires the use of third-party libraries.

How to style with Sass

Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. In Gatsby, Sass code can be translated to well-formatted, standard CSS using a plugin.

How to style with Tailwind CSS

How to style with Emotion

Emotion is a performant and flexible CSS-in-JS library. It allows you to style apps quickly with string or object styles.

How to add local fonts

If you have custom fonts hosted on your computer, Gatsby supports their use in your project

How to add web fonts

Hosting your fonts within a Gatsby project increases your site’s speed by up to ~300 milliseconds on desktop and 1+ seconds on 3G connections.

 Additional Guides 5

  • Using Styled Components
  • Using PostCSS
  • Using Bulma
  • Using Theme UI
  • Additional Guides