How to add TailwindCSS to a new brand Gatsby site

This tutorial requires that you have Gatsby installed on your computer. If not please read this doc Set Up Your Development Environment.

Step 1: Create your site from a blank starter.

Open up your terminal and run:

gatsby new brand-new-site https://github.com/JuanJavier1979/gatsby-starter-default-nostyles
cd brand-new-site

Step 2: Install TailwindCSS.

Then, let's install TailwindCSS and PostCSS

yarn add tailwindcss gatsby-plugin-postcss

Step 3: Configure TailwindCSS.

Before integrating into our site we need to create a TailwindCSS config file, like so:

yarn tailwind init

Step 4: Configure PostCSS.

Create a file postcss.config.js and add this:

const tailwind = require('tailwindcss')

module.exports = () => ({
  plugins: [tailwind('./tailwind.config.js')],
})

Step 5: Add PostCSS to Gatsby.

Edit gatsby-config.js and add this line 'gatsby-plugin-postcss', into the plugins object. It will look like this:

  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-postcss',
    [...]

Step 6: Add TailwindCSS into your CSS.

Create a directory inside src to store your CSS files. I will name it styles

Then simply create a new CSS file global.css and add this:

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

Finally import the new CSS file into src/pages/index.js:

import "../styles/global.css"

Step 7: Run Gatsby.

Now from your CLI let's compile the site by running

gatsby develop

Next steps: Use TailwindCSS utility classes into your own CSS classes

You can now add src/styles/global.css

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

h1 {
  @apply text-3xl;
}

Or add TailwindCSS utility classes into your HTML code. Let's add a container class to the main element in src/components/layout.js file.

<main className="container mx-auto">{children}</main>

Useful links

To learn other install methods, take a read at official documentation on Gatsby site Tailwind CSS on Gatsby.

To know more about how to configure Tailwind CSS browse their documentation here: Tailwind CSS Configuration.