Using Tailwind in SASS with Gatsby JS
Tags: gatsby, css, sass, tailwindcss
Published: 2019-12-12 20:41:45

---
title: Using Tailwind in SASS with Gatsby JS
published: true
description: A quick guide to configuring Tailwind to work within sass and scss files within a Gatbsy project.
tags: Gatsby, CSS, SASS, TailwindCSS
---

I recently had project to convert a site to Gatsby, and it was using both [Tailwind CSS](https://tailwindcss.com/) 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

```bash
# 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.

```js
// 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:

```sass
// 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:

```js
// 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!