Hey Gatsby! Can you add tailwind to my codebase?

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!