If you have read some of our other blogs on Tailwind CSS, Webpack Configuration for React & Tailwind CSS, you know that we are big fans of the Tailwind CSS utility library. We have used it on multiple Vue.js projects, Nuxt.js projects as well as React.js and it fits nicely into all of these ecosystems. Today, we’re going to look a simple configuration for setting up Tailwind CSS in a Gatsby.js project. Let’s dive in!

Gatsby is an open source project, based on React, that allows for static site generation (SSG) and is a very popular framework for creating JAMStack websites and applications. Fortunately, Gatsby has an active ecosystem of plugins that extend the functionality of Gatsby applications. One such plugin that we will use is the gatsby-plugin-postcss which does a lot of the heavy lifting for us since Tailwind CSS is a PostCSS plugin!

We can install gatsby-plugin-postcss and add it to our Gatsby project:

npm install gatsby-plugin-postcss
// or
yarn add gatsby-plugin-postcss

We will also need to add tailwindcss as that will be a PostCSS plugin dependency. We can install tailwindcss the same way we installed gatsby-plugin-postcss with our package manager of choice:

npm install tailwindcss
// or
yarn add tailwindcss

And to add it to our Gatsby project we can configure our gatsby-config.js file. If you don’t have one yet, you can create one in your project folder: vim gatsby-config.js and you can add:

module.exports = {
  plugins: [
    { 
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [
          require(`tailwindcss`)
        ]
      }
    }
  ],
}

Wow, wasn’t that simple? Now all of our css files in our project will be processed with PostCSS and as tailwindcss as a plugin dependency for our PostCSS all of the tailwind directives ie. @tailwind will be replaced with the Tailwind library. This bodes well for us since Tailwind CSS is a PostCSS plugin and will look for tailwind directives such as: @tailwind base; to import the base styles provided by tailwind or @apply to inline any existing utility classes into your own custom CSS. Now all we have left to do is create a Tailwind CSS config file, import the tailwind library using the tailwind directives and include the file in our Gatsby project. First we can create a Tailwind config from the root of our directory by running:

npx tailwindcss init

This will create tailwind.config.js file that we can use to configure Tailwind. Next, we can create a file in src/styles directory such as: mkdir src/styles && vim src/styles/tailwind.css and add our tailwind directives:

@tailwind base;

@tailwind components;

@tailwind utilities;

Finally, we have to include our tailwind.css file in our gatsby project so our gatsby-plugin-postcss will process it as a PostCSS file. Conveniently, we can do that inside our gatsby-browser.js file by importing it. If you don’t have the gatsby-browser.js file you can create one in the root of your project directory and add:

import "./src/styles/tailwind.css"

Easy peasy! Now in all of your components you can use Tailwind CSS utility classes, or in your imported css files you can use Tailwind CSS utility directives. That is how you are up and running with Tailwind CSS and Gatsby in Under 5 Minutes! Until next time, stay curious, stay creative!