Skip to main content


Global Styles


You will need to create the styles directory.

body {
background-color: #f3f4f6;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;


import React from "react"
import Footer from "./footer"
import Header from "./header"
+ import "../styles/global.css"

export default function Layout({ children }) {
return (
<Header />
<Footer />

Component Styles (Scoped)

  1. Create a CSS Module for the layout component.


    .container {
    margin: 0 auto;
    max-width: 1920px;
    padding: 10px;
  2. Import your css module into the component and apply the container class.


    import React from "react"
    import Footer from "./footer"
    import Header from "./header"
    + import * as styles from "./layout.module.css"

    export default function Layout({ children }) {
    return (
    - <div>
    + <div className={styles.container}>
    <Header />
    <Footer />


CSS-in-JS is a styling technique where JavaScript is used to style components. When this JavaScript is parsed, CSS is generated (usually as a <style> element) and attached into the DOM. It allows developers to abstract CSS to the component level itself, using JavaScript to describe styles in a declarative and maintainable way.

There are multiple implementations of this concept in the form of libraries such as:

  • Emotion
  • Styled Components

For more information on the adoption level and user satisfaction of these libraries see the State of CSS Survey and this npm Trends Chart.


npm install gatsby-plugin-emotion @emotion/react @emotion/styled


module.exports = {
plugins: [`gatsby-plugin-emotion`],


import { Link } from 'gatsby';
import React from 'react';
import styled from '@emotion/styled';

const NavLink = styled(Link)`
margin-left: 5px;
margin-right: 5px;
padding: 10px;
color: #4b5563;
text-decoration: none;
font-size: 1.25rem;
&:hover {
color: #1f2937;
border: 1px solid #1f2937;
padding: 10px;

const StyledHeader = styled.header`
border-bottom: 1px solid #4b5563;
padding-top: 20px;
padding-bottom: 20px;

export default function Header() {
return (
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>

Utility-First CSS

Building complex components from a constrained set of primitive utilities

Utility-First Example

Traditionally, whenever you need to style something on the web, you write CSS.

Using a traditional approach where custom designs require custom CSS

<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
alt="ChitChat Logo"
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>

.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
.chat-notification-logo-wrapper {
flex-shrink: 0;
.chat-notification-logo {
height: 3rem;
width: 3rem;
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;

With utility classes (Tailwind), you style elements by applying pre-existing classes directly in your HTML.

Using utility classes to build custom designs without writing CSS

class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>

Utility-First Benefits

  • You aren't wasting energy inventing class names
  • Your CSS stops growing
  • Making changes feels safer

Why not just use inline styles?

  • Designing with constraints.
    • Using inline styles, every value is a magic number. With utilities, you're choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs.
  • Responsive design.
    • You can't use media queries in inline styles, but you can use Tailwind's responsive utilities to build fully responsive interfaces easily.
  • Hover, focus, and other states.
    • Inline styles can't target states like hover or focus, but Tailwind's state variants make it easy to style those states with utility classes.


  • a utility-first CSS framework
  • for rapidly building custom user interfaces


Utility-First Defined


  1. How can you include global styles in a Gatsby site?
  2. What do you think about CSS-in-JS approaches to styling in Gatsby?
  3. What are some of the benefits with using a Utility-first CSS Framework like Tailwind?