Skip to main content

CSS Modules

CSS modules and Gatsby

Gatsby works out of the box with CSS Modules. Here is an example site that uses CSS modules.

What is a CSS module?

Quoting from the CSS Module homepage:

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

CSS Modules are very popular as they let you write CSS like normal but with a lot more safety. The tool automatically makes class and animation names unique so you donā€™t have to worry about selector name collisions.

When to use CSS modules

CSS Modules are highly recommended for those new to building with Gatsby (and React in general).

How to build a page using CSS modules

Visit the CSS Modules section of the tutorial to learn how to build a page using CSS modules.

edit this page on GitHub