Add TailwindCSS to Gatsby

Install

Setting up Tailwind CSS in a Gatsby project.

npm install -D gatsby-plugin-postcss tailwindcss@latest postcss@latest autoprefixer@latest

Enable gatsby-plugin-postcss

In your gatsby-config.js file, enable the postcss plugin.

// gatsby-config.js
module.exports = {
    /* Your site config here */
    plugins: ['gatsby-plugin-postcss'],
}

Include Tailwind in your CSS

Create the ./src/css/index.css file and use the @tailwind directive to include Tailwind’s base, components, and utilities styles

/* ./src/css/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system.

Finally, create a ./gatsby-browser.js file at the root of your project if it doesn’t already exist, and import your CSS file:

// ./gatsby-browser.js
import "./src/css/index.css"