Using Tailwind in SASS with Gatsby JS

I recently had project to convert a site to Gatsby, and it was using both Tailwind CSS and SASS, so I had to figure out how to convince those two to play nice. I tried a few different solutions that were not ideal, and then found a simpler way to do it. So here it is!

Note: I started on this article before the Gatsby documentation had an official recommendation for this, and just got around to finishing it, but thankfully their recommendation is the same as what I ended up doing. This article contains a few extra steps for a "from scratch" setup, but if you can find the official documentation here: https://www.gatsbyjs.org/docs/tailwind-css/#option-3-scss

Step 1: Install Dependencies

# Using npm
npm install gatsby-plugin-sass node-sass tailwindcss --save

# Using Yarn
yarn add gatsby-plugin-sass tailwindcss --dev

Step 2: Configure gatsby-plugin-sass to use Tailwind

The gatsby-plugin-sass plugin you installed has a fantastic option allowing you to configure it to use PostCSS plugins, like autoprefixer. Which works out nicely because Tailwind is actuall a PostCSS plugin! So, to use Tailwind directives within your CSS, you can drop the following code into your Gatbsy configuration file.

// gatbsy-config.js

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      // Configure SASS to process Tailwind
      postCssPlugins: [require('tailwindcss')],
    },
  },
  // ... more plugins ... 
]

Step 3: Generate Tailwind Config File

To configure Tailwind, we'll need to add a Tailwind configuration file. Luckily, Tailwind has a built-in script to do this. Just run the following command (again, in your project's root directory).

./node_modules/.bin/tailwind init

This will create a tailwind.js file containing Tailwind's default configuration.

Step 4: Add a SASS/SCSS File With Tailwind Directives

Everything should be ready to go, all we need to do now is to actually use Tailwind within our styles! First, create a global.scss file. I put mine at src/css/global.scss. Then, add the following Tailwind directives to your new file:

// global.scss

@tailwind preflight;

@tailwind components;

@tailwind utilities;

Two notes:
1) gatsby-plugin-sass works with both scss and sass files.
2) For this step, I opted to create a new global.scss file, but you could just as easily put the Tailwind directives in an existing SASS file.

Step 5: Import Our Tailwind CSS

The last thing we need to do is to import our new SASS file into a page or layout so that our Tailwind CSS is actually injected into our pages. In layout.js, or wherever you want your Tailwind CSS to appear, add the following import:

// layout.js

import '../css/global.scss'

You're Finished!

That's it, you should have a beautiful SASS + Tailwind + Gatsby setup!

If you run into any trouble along the way, let me know in the comments and I'll happily help out and/or revise this article with any corrections!