Styling in GatsbyJS [Part 4]

Welcome to the fourth part of our GatsbyJS series! In this article, we will explore various ways to style your GatsbyJS project, including Inline CSS, CSS Modules, Styled Components, and popular CSS frameworks like Bootstrap and Tailwind CSS. We will also cover theming, global styles, and CSS-in-JS options.

If you haven’t read the previous articles in the series, we highly recommend starting with our third article, Gatsby’s Building Blocks: Components and Pages, before diving into this one.

• Inline CSS, CSS Modules, and Styled Components
  • 1. Inline CSS
  • 2. CSS Modules
  • 3. Styled Components
• Using popular CSS frameworks (e.g. Bootstrap, Tailwind CSS)
  • 1. Bootstrap
  • 2. Tailwind CSS
  • 3. Theming and global styles
  • 4. CSS-in-JS options
• Conclusion

Inline CSS, CSS Modules, and Styled Components

1. Inline CSS

Inline CSS is the simplest way to apply styles to your GatsbyJS components. It involves adding a style attribute directly to an HTML element and defining the styles as JavaScript objects. This approach is easy to understand but not recommended for large-scale projects due to its lack of reusability and maintainability.

Example –

import React from "react"

const MyComponent = () => (
  <div style={{ color: "blue", fontSize: "24px" }}>
    Hello, Gatsby!
  </div>
)

export default MyComponent

2. CSS Modules

CSS Modules are a more maintainable and modular way to style your GatsbyJS components. They automatically generate unique class names for your styles, preventing class name conflicts and promoting component-level styling.

To use CSS Modules, create a .module.css file alongside your component file and import the styles as you would with a regular JavaScript module.

Example:

my-component.module.css

.container {
  color: blue;
  font-size: 24px;
}

my-component.js

import React from "react"
import styles from "./my-component.module.css"

const MyComponent = () => (
  <div className={styles.container}>
    Hello, Gatsby!
  </div>
)

export default MyComponent

3. Styled Components

Styled Components is a popular CSS-in-JS library allows you to write CSS directly in your JavaScript components. It generates unique class names, handles vendor prefixing, and enables dynamic styling based on component props.

To use Styled Components in your GatsbyJS project, you will need to install the library and its Gatsby plugin –

npm install --save styled-components gatsby-plugin-styled-components

Then, add the plugin to your gatsby-config.js –

module.exports = {
  plugins: ["gatsby-plugin-styled-components"],
}

Example –

my-component.js

import React from "react"
import styled from "styled-components"

const Container = styled.div`
  color: blue;
  font-size: 24px;
`

const MyComponent = () => (
  <Container>
    Hello, Gatsby!
  </Container>
)

export default MyComponent

Using popular CSS frameworks (e.g. Bootstrap, Tailwind CSS)

1. Bootstrap

To use Bootstrap in your GatsbyJS project, install the Bootstrap package and import the styles in your project’s entry file, typically gatsby-browser.js –

npm install --save bootstrap

gatsby-browser.js

import "bootstrap/dist/css/bootstrap.min.css"

Now you can use Bootstrap’s classes and components in your GatsbyJS project –

import React from "react"
import { Button } from "react-bootstrap"

const MyComponent = () => (
  <Button variant="primary">
    Hello, Gatsby!
  </Button> 
)

export default MyComponent

2. Tailwind CSS

To use Tailwind CSS in your GatsbyJS project, first install the required packages:

sh npm install --save tailwindcss gatsby-plugin-postcss

Then, create a tailwind.config.js file in your project root –

npx tailwindcss init

Next, add the gatsby-plugin-postcss plugin to your gatsby-config.js –

module.exports = {
  plugins: ["gatsby-plugin-postcss"],
}

In your postcss.config.js, configure PostCSS to use Tailwind CSS –

module.exports = {
  plugins: [require("tailwindcss")],
}

Finally, import the Tailwind CSS styles in your project’s entry file, typically gatsby-browser.js –

import "tailwindcss/tailwind.css"

Now you can use Tailwind CSS utility classes in your GatsbyJS project –

import React from "react"

const MyComponent = () => (
  <div className="text-blue-500 text-2xl">
    Hello, Gatsby!
  </div>
)

export default MyComponent

3. Theming and global styles

To create global styles in your GatsbyJS project, you can use the createGlobalStyle function from the Styled Components library. This function generates a component that injects the global styles when rendered.

Example –

global-styles.js

import { createGlobalStyle } from "styled-components"

const GlobalStyles = createGlobalStyle`
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
`

export default GlobalStyles

To use these global styles, import the GlobalStyles component in your project’s entry file, typically gatsby-browser.js, and include it in your layout component –

gatsby-browser.js

import React from "react"
import Layout from "./src/components/layout"
import GlobalStyles from "./src/components/global-styles"

export const wrapPageElement = ({ element }) => (
  <Layout>
    <GlobalStyles />
    {element}
  </Layout>
)

4. CSS-in-JS options

In addition to Styled Components, there are other popular CSS-in-JS libraries you can use in your GatsbyJS project.

• Emotion: A popular library with a similar API to Styled Components. Install it with npm install --save @emotion/react gatsby-plugin-emotion and add the plugin to your gatsby-config.js.
• JSS: A powerful and flexible CSS-in-JS solution. Install it with npm install --save jss jss-preset-default gatsby-plugin-jss and add the plugin to your gatsby-config.js.

Conclusion

In this article, we explored various styling options in GatsbyJS, including Inline CSS, CSS Modules, Styled Components, and popular CSS frameworks Bootstrap and Tailwind CSS. We also covered theming, global styles, and other CSS-in-JS options. With this knowledge, you can confidently choose the best styling approach for your GatsbyJS project.

In the next article, we will dive into Gatsby Plugins and Themes. Stay tuned!