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!
Oldest comments (6)
This is amazing thanks! I'm having issues getting my configuration file changes to apply, any special technique involved with this setup?
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
That works, thanks! I'm not using gatsby but I just run
gulp watchwhen I need some of those values changed and it works like a charm :)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
@applycan only be used for classes in the same CSS tree. Do you have any idea where this comes from?Thanks for writing this straightforward explanation! Works perfectly.
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?