Ben Borgers / Posts /

How to add normalize.css to Gatsby

January 23, 2021 by @benborgers

Normalize.css is a set of CSS rules used to make all browsers render things consistently. Since all browsers come with their own "base" styles that can vary slightly, it's useful for making sure that your CSS styles look the same in every browser and smoothes over any inconsistencies between browsers.

To add it to your Gatsby site, first install the normalize.css npm package using the command line:

npm install normalize.css

Then, import the stylesheet to any Gatsby page you want to use it on:

import React from "react"

import "normalize.css"

export default () => {
  return (
    <div>the page is here</div>

You'll need to do this on every page that you want to use normalize.css on. You can make this less tedious by adding it to the template that multiple pages use (more information can be found in Gatsby's documentation), or by adding it to a shared component that all pages import and use.

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!