Gatsby Tailwind Theme

A Gatsby theme to use tailwindcss.

Demo site

Summary

This theme installs:

• Tailwindcss
• gatsby-plugin-postcss
• Emotion (CSS in JS)

Tailwindcss and postcss are required to have tailwind properly working, emotion is installed because it is very common to use a CSS in JS framework and I think it is useful to have emotion and tailwind installed and configured to work together.

Installation

Manually add to your site

npm install --save @renejam/gatsby-theme-tailwindcss

or

yarn add @renejam/gatsby-theme-tailwindcss

Usage

Add Tailwind to your CSS

As stated on its official documentation, inject Tailwind’s styles using the @tailwind directive:

@tailwind base;

@tailwind components;

@tailwind utilities;

You should write these 3 directives either on a css you are importing or creating a new .css file and importing it.

I recommend creating a globals.css file for example in a utils folder and use it for tailwind loading directives and later extracting CSS components and / or other customisations if needed.

├── gatsby-config.js
├── node_modules
├── package.json
└── src
    ├── pages
    │   └── index.js
    └── utils
        └── globals.css

NOTE: If you experience a FOUC (flash of unstyled content) when first loading pages, import the above mentioned .css file on gatsby-browser.js, like this:

//gatsby-browser.js
import "./src/utils/globals.css"

Configuration

Add a tailwind.config.js file at the root of your project folder

yarn tailwind init

or

npx tailwindcss init

Theme options

This theme is using gatsby-plugin-postcss under the hood, so you can pass in any options you would to the actual postcss plugin (postCssPlugins and cssLoaderOptions)

NOTE: using a postcss.config.js file is not supported, you have to use the options: {} object of the theme.

Example usage

The only plugin included as default is the actual tailwindcss required to work, but I do recommend using the autoprefixer plugin.

With autoprefixer

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-tailwindcss`,
      options: {
        postCssPlugins: [require("autoprefixer")],
      },
    },
  ],
}