Tailwind CSS

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. This guide will show you how to get started with Gatsby and Tailwind CSS.

This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the Quick Start guide, then come back.

Overview

There are two ways you can use Tailwind with Gatsby:

Standard: Use PostCSS to generate Tailwind classes, then you can apply those classes using className.
CSS-in-JS: Integrate Tailwind classes into Styled Components.

You have to install and configure Tailwind for both of these methods, so this guide will walk through that step first, then you can follow the instructions for either PostCSS or CSS-in-JS.

Installing and Configuring Tailwind

Install Tailwind

npm install tailwindcss --save-dev

Generate Tailwind config file

To configure Tailwind, we’ll need to add a Tailwind configuration file. Luckily, Tailwind has a built-in script to do this. Just run the following command:

./node_modules/.bin/tailwind init

Option #1: PostCSS

Install the Gatsby PostCSS plugin gatsby-plugin-postcss.

npm install --save gatsby-plugin-postcss

Include the plugin in your gatsby-config.js file.

gatsby-config.js

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

Configure PostCSS to use Tailwind

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

postcss.config.js

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

Use the Tailwind Directives in your CSS

You can now use the @tailwind directives to add Tailwind’s utilites, preflight, and components into your CSS. You can also use @apply and all of Tailwind’s other directives and functions!

To learn more about how to use Tailwind in your CSS, visit the Tailwind Documentation

Option #2: CSS-in-JS

These steps assume you have a CSS-in-JS library already installed, and the examples are based on Styled Components.

Install Tailwind Babel Macro

npm install --save tailwind.macro

Use the Babel Macro (tailwind.macro) in your styled component

import styled from "styled-components"
import tw from "tailwind.macro"

const Button = styled.button`
  ${tw`bg-blue hover:bg-blue-dark text-white p-2 rounded`};
`

Other resources

Edit this page on GitHub