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