Getting setup with Tailwind & Gatsby

I redesigned this site a while ago, moving from Jekyll over to Gatsby mainly because I wanted to learn some React. The learning curve was steep as I was coming from mainly an HTML, CSS and Python background. Never really spent too much time playing with JS, apart from JQuery the much more simplified JS Library.

Playing around with Gatsby and React, I started building out separate .scss files for each component which got harder and harder to manage. I then found TailWindCSS a utility first CSS framework, the way I styled by components changed for the better.

At first, I struggled to get to grips with setting it up within Gatsby, after a few links and youtube videos I got everything set up the way I wanted and below is how I did just that.

Create your Gatsby project

Install the Gatsby CLI globally if you don't have it already

npm install -g gatsby-cli

Create your new site and then cd into the directory

gatsby new <project-name> && cd <project-name>

Adding TailWindCSS

Once the project has finished building you're now able to add TailWind

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

Once that has completed then add a .css file to your src/components folder to inject Tailwind's base, components, and utilitiesstyles into your CSS:

@tailwind base; 
@tailwind components; 
@tailwind utilities;

Create a TailWind config file (optional)

You can skip this bit if you want too, but I would recommend creating one as you can change the behaviour of TailWind with it. I generally use it to center my containers as a default.

npx tailwindcss init

Which will create a file with the below structure. I have added my own file to help show how I use it.

// tailwind.config.js
module.exports = {
  theme: {
    container: {
        center: true
    },
}

Learn more about configuring Tailwind in the configuration documentation.

Using TailWind with PostCSS

This is where I got stuck when following the TailWind instructions on installing it. Gatsby being Gatsby there was a plugin for PostCSS, so we need to install that.

npm install --save gatsby-plugin-postcss

Once the plugin has finished installing, we need to add the config to our gatsby-config.js file by adding the following.

// gatsby-config.js
{
 resolve: 'gatsby-plugin-postcss',
    options: {
        postCssPlugins: [require('tailwindcss')('./tailwind.config.js')],
     },
 },

This now includes the tailwind.css and tailwind.config.js file, so we're able to process the CSS.

Final step

Now all that is left is to import the tailwind.css file via our gatsby-browser.js file by simply adding the following line.

// gatsby-browser.js
import "./src/components/tailwind.css"

Purging the CSS

Now everything is set up, it's time to set up purge css so we're able to remove any unused CSS.

npm i --save gatsby-plugin-purgecss

// gatsby-config.js
{
  resolve: `gatsby-plugin-purgecss`,
  options: { tailwind: true }
}

Now this should clean up your unused CSS making your site even faster!

Done

Now you're able to use TailWind within your Gatsby project with ease. Simply just add the class names to your JSX and then run gatsby develop to see the changes.