Hey Gatsby! Can you add tailwind to my codebase?

19 November 2020

Add Tailwindcss to Gatsby
Photo by wiesehofer

I am releasing a book about the React Native ecosystem, which covers everything I wish I had known before I started working with this technology.

If you appreciate my work and would like to show your support, please check the Road to React Native.

TLDR;
You can check the diff of the commit on GitHub

Gatsby recipes is a game changer

If you landed on my previous article about Gatsby and TypeScript, who already know the benefits of the tool. It saves you a lot of time because the instruction are updated and your are working directly from the teminal.

Today the mission was to migrate my codebase to tailwind because I am using it on another project and I am lasy to deal with thousands of UI frameworks. Before checking the online documentation, I ran this from the terminal:

gatsby recipes

You can choose your recipe with the arrow up or down:

Select a recipe to run
Add Gatsby Theme Blog
Add persistent layout component with gatsby-plugin-layout
Add Styled Components
>>Add Tailwind
Add Sass
Add Typescript

Hit enter and Boom you start the installation.

Setup Gatsby with Tailwind CSS

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Step 1 / 3

Installs necessary NPM packages.

Proposed changes

NPMPackage:
* Install tailwindcss@latest
* Install gatsby-plugin-postcss@latest

Hit enter and continue the installation.

Step 2 / 3

Installs necessary Gatsby plugins.

Proposed changes

GatsbyPlugin:
* Install gatsby-plugin-postcss in gatsby-config.js

Accept the diff and continue the install.

Step 3 / 3

Sets up necessary files.

Proposed changes

File:
* Write postcss.config.js
---
module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
}
---

File:
* Write tailwind.config.js
---
module.exports = {
purge: [
'./src/**/*.js',
],
theme: {
extend: {}
},
variants: {},
plugins: []
}
---

File:
* Write src/styles/tailwind.css
---
@tailwind base;
@tailwind components;
@tailwind utilities;
---

File:
* Write src/pages/usingtailwind.js
---
import React from 'react'
import '../styles/tailwind.css'

export default () => (
<h1 className="text-3xl">This is a 3xl text</h1>
)
---

Final step

If everything is correctly setup you should have this output

✅ Installed NPM package tailwindcss@1.9.6
✅ Installed NPM package gatsby-plugin-postcss@3.1.0
✅ Installed gatsby-plugin-postcss in gatsby-config.js
✅ Wrote file postcss.config.js
✅ Wrote file tailwind.config.js
✅ Wrote file src/styles/tailwind.css
✅ Wrote file src/pages/usingtailwind.js

Et voila!

Are your sure?

Did you deploy to production?

Thanks to netlify preview deploy build I noticed one thing: all the tailwind css is missing.

Update your purge configuration

If you are using TypeScript —like me— you need to update the purge config.

// tailwind.config.js

module.exports = {
purge: ["./src/**/*.js", "./src/**/*.tsx"], //here
theme: {
extend: {},
},
variants: {},
plugins: [],
}

And double check your configuration, it should be like this

// gatsby-config.js

module.exports = {
// ...
plugins: [
// ... ALL OTHER PLUGINS HERE ...
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: false,
develop: false,
tailwind: true,
},
}
],
}

Et voila!

Gravatar for dleuliette@gmail.com

Hi, I’m David, a french freelance developer working remotely. I’m the author of this blog, nice to meet you!

Subscribe?

Be the first to receive insightful articles and actionable resources that help you to elevate your skills.