Install Tailwind CSS with Gatsby

Setting up Tailwind CSS in a Gatsby project.

Create your project

Start by creating a new Gatsby project if you don't have one set up already. The most common approach is to use Gatsby CLI.

Terminal

gatsby new my-projectcd my-project

Install Tailwind CSS

Install @tailwindcss/webpack and its peer dependencies via npm.

Terminal

npm install tailwindcss @tailwindcss/webpack

Configure the webpack loader

Create a gatsby-node.js file in the root of your project (or add to the existing one) and configure the @tailwindcss/webpack loader.

gatsby-node.js

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {  const config = getConfig()  config.module.rules.push({    test: /\.css$/i,    use: ['@tailwindcss/webpack'],  })  actions.replaceWebpackConfig(config)}

Import Tailwind CSS

Create a ./src/styles/global.css file and add an @import for Tailwind CSS.

global.css

@import "tailwindcss";

Import the CSS file

Create a gatsby-browser.js file at the root of your project if it doesn't already exist, and import your newly-created ./src/styles/global.css file.

gatsby-browser.js

import './src/styles/global.css';

Start your build process

Run your build process with gatsby develop.

Terminal

gatsby develop

Start using Tailwind in your project

Start using Tailwind's utility classes to style your content.

index.js

export default function IndexPage() {  return (    <Layout>      <h1 className="text-3xl font-bold underline">        Hello world!      </h1>    </Layout>  )}

Install Tailwind CSS with Gatsby

Using webpack

Using PostCSS

Create your project

Install Tailwind CSS

Configure the webpack loader

Import Tailwind CSS

Import the CSS file

Start your build process

Start using Tailwind in your project