@jambaree/gatsby-theme-tailwindcss

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