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.