Gatsby Tailwincss Recipe

postcss.config.js

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
}

tailwind.config.js

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

tailwindcss-gatsby-recipe.mdx

Setup Gatsby with Tailwindcss

Tailwindcss Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

---

Install necessary NPM packages

---

Install necessary Gatsby Plugins

---

Setup necessary Files

You are good to go

using-tailwindcss.js

import React from "react"
import '../styles/tailwind.css'

export default () => (<h1 className="text-3xl">This is a 3xl text</h1>)