Gatsby with Tailwind CSS

February 24, 2020

Gatsby.js with Tailwind CSS and PurgeCSS (Oct 2019)

The right way to add Tailwind CSS to a Gatsby.js React Application, using Post CSS and Purge CSS. We'll also look at how to make use of the Tailwind CSS utility classes with a re-useable React Button component with different size variations.


gatsby new play-tailwind
cd play-tailwind

npm install tailwindcss gatsby-plugin-postcss


    plugins: [`gatsby-plugin-postcss`],

Create tailwind.config.js

npx tailwindcss init 

Add Tailwind to your CSS (by postcss)


@tailwind base;
@tailwind components;
@tailwind utilities;

Create a postcss.config.js in your project’s root folder with the following contents.


module.exports = () => ({
 	plugins: [require("tailwindcss")],


import "./src/styles/tailwind.css"

gatsby develop


import React from 'react'

const sizes = {
    default: `py-4 px-4`,
    lg: `py-6 px-6`,
    xl: `py-8 px-8 text-xl`

const Button = ( {children, size} ) => {
    // size = "lg"
    // sizes.lg = `py-6 px-6`
        <button className={`
            ${sizes[size] || sizes.default } 
            bg-green-600 hover:bg-green-700 rounded text-white

export default Button


import React from "react"
import Button from '../components/Button'

export default () => 
    <div className="p-8">
        <button className="py-4 px-4 bg-blue-600 hover:bg-blue-700 rounded text-white">
            Button One
        <p className="mt-8">
            <Button>Default Button</Button>
        <p className="mt-8">
            <Button size="lg">Large Button</Button>
        <p className="mt-8">
            <Button size="xl">XL Button</Button>

gatsby build
gatsby serve
localhost:9000 -> right click -> view page source

Strip out unused tailwind classes

npm install gatsby-plugin-purgecss

Add gatsby-plugin-purgecss at the end of gatsby-config.js