Styling

Global Styles

src\styles\global.css

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;
}

src\components\layout.js

import React from "react"
import Footer from "./footer"
import Header from "./header"
+ import "../styles/global.css"
export default function Layout({ children }) {
return (
<div>
<Header />
{children}
<Footer />
</div>
)
}

Component Styles (Scoped)

  1. Create a CSS Module for the layout component.

    src\components\layout.module.css

    .container {
    margin: 0 auto;
    max-width: 1920px;
    padding: 10px;
    }

  2. Import your css module into the component and apply the container class.

    src\components\layout.js

    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 />
    {children}
    <Footer />
    </div>
    )
    }

CSS-in-JS

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.

Emotion

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

gatsby-config.js

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

src\components\header.js

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 (
<StyledHeader>
<nav>
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
</nav>
</StyledHeader>
);
}

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">
<img
class="chat-notification-logo"
src="/img/logo.svg"
alt="ChitChat Logo"
/>
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>
<style>
.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;
}
</style>

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

<div
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>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>

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.

Tailwind

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

Reference

Utility-First Defined

Review

  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?
Edit this page