What this post isn't

An introduction to any of these technologies. I'll post some resources at the end if you want to dig into them further, but this is just intended to explain how I scratched my itch figuring out how to Emotion and Tailwind together in Gatsby.

Something I intend to apply to my website very soon.

Let's install stuff!

Everyone's favorite part of the tutorials is talking about what you need to install, right? Great!

I want to be able to do 2 things:

Be able to use Tailwind in my CSS-in-JS styling.

Be able to use Tailwind classes as you would normally within className.

Step 1: Install Tailwind

npm install tailwindcss --save-dev

Step 2: Install the PostCSS plugin for Gatsby

npm install --save gatsby-plugin-postcss

Additionally, we'll need to add a PostCSS config in the root folder called postcss.config.js. Add this:

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

Step 3: Install the Babel Tailwind macro

npm install --save tailwind.macro@next

Step 4: Install the necessary libraries for Emotion

This is because I want to use Emotion! Thankfully, it's my site so I don't have to justify my decisions to 3rd parties.