Now 100x Faster

Read the latest from Gatsby CTO Kyle Mathews Re-introducing Gatsby, a Reactive Site Generator

ContactSign Up for Free
Community Plugin
View plugin on GitHub

A Gatsby theme to easily use tailwindcss.

Summary

This theme installs:

Installation

yarn add @jambaree/gatsby-theme-tailwindcss

Usage

Add the newly generated globals.css file to your gatsby-browser

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

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.
Key Default value Description
postCssPlugins [require(“tailwindcss”)] postcss-plugins to load
cssLoaderOptions {} postcss css loader options
emotionOptions {} emotion babel-plugin-emotion options

With autoprefixer

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