@jambaree/gatsby-theme-tailwindcss

Community Plugin

A Gatsby theme to easily use tailwindcss.

Summary

This theme installs:

Tailwindcss
gatsby-plugin-postcss
Emotion (CSS in JS)
@tailwindcss/typography’

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")],
      },
    },
  ],
}