Hey Gatsby! Can you add tailwind to my codebase?

Add Tailwindcss to Gatsby
Photo by wiesehofer

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!

One more thing.
If you learned something new, let me know andshare this article on Twitter.

Meet the author

David is a freelance developer and trainer specializing in cross-platform application development. He helped dozens of companies to ship their MVP and automate their process.

Gravatar for dleuliette@gmail.com

David Leuliette

Freelance React Developer

twitter
github
Subscribe?

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