Using CSS Modules in GatsbyJS

Use clear, organized CSS files to help your code stay DRY.

  • <p>
  • <a>
  • <ul>
  • <li>
.project-description {

<div className="project-description"></div>
.projectDescription {

<div className={styles.projectDescription}></div>


One thing to be aware of when using CSS modules is to stick with just class names and nested elements. If you attempt to style all of the <p> tags on a page for example, like so:

p {
font-size: 20px;

Full-Stack Software Engineer; using a background in Acting and Voice-Over to pursue a lifelong love of software and technology from a humanities perspective.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store