DEV Community

Jake Dohm
Jake Dohm

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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 ... 
]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (6)

Collapse
 
tonoli profile image
Ignacio Tonoli

Hi Jake! Thanks for the tutorial! I followed the documentation and your advice too, but I want to create for instance a _button.scss file containing all my scss for button and use @apply. I have some truble with this error Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree. Do you have any idea where this comes from?

Collapse
 
stu profile image
Stu Finn

Thanks for writing this straightforward explanation! Works perfectly.

Collapse
 
joshistoast profile image
Josh Corbett

This is amazing thanks! I'm having issues getting my configuration file changes to apply, any special technique involved with this setup?

Collapse
 
jakedohm_34 profile image
Jake Dohm

Hey Josh! I believe you have to stop your build process and then re-run “gatsby develop” after you make changes to your tailwind config. If you’re still not seeing changes after this, I’m not sure what’s up, but let me know, and send over a way for me to reproduce what you’re seeing and I can do some digging

Collapse
 
joshistoast profile image
Josh Corbett

That works, thanks! I'm not using gatsby but I just run gulp watch when I need some of those values changed and it works like a charm :)

Collapse
 
mosquid profile image
Dmitry Mosquid

Doesn't seem to work. I followed the guide step by step, but tailwind classes (div.m-10) do not take any effect. What do I do wrong?