DEV Community

Using Tailwind with Gatsby JS

Jake Dohm on January 03, 2019

I'm beginning to rebuild my personal website using Gatsby JS, and of course I want to use my favorite CSS framework, Tailwind CSS! I searched aroun...

Read full post

Sebastien Barre • Jan 4 '19 • Edited

Three Gatsby starters that use Tailwind:

Jake Dohm • Jan 5 '19

Thanks so much for sharing these!

For anyone who comes across these, a few notes:

The starter by Taylor Bryant is the only one that follows the same approach that this article does.
The LekoArts starter combines Tailwind and Styled Components, and the starter by Jason Lengstorf combines Tailwind with Emotion. Both of these are awesome, but different from my approach 😄

Lastly, Taylor Bryant's starter also includes PurgeCSS which removes all of the unnecessary Tailwind classes from your bundle!

Joseph Goksu • Jul 8 '19

@tailwind preflight is not a valid at-rule in Tailwind v1.0, use @tailwind base instead.

✅ Correct One

@tailwind base;

@tailwind components;

@tailwind utilities;

Jake Dohm • Jul 8 '19

Thanks for sharing this! I'll test out this setup with Tailwind 1.0 and update my article accordingly 👍

Max Antonucci • Jan 4 '19

I'm a fan of Tailwind myself, glad to see another tutorial for setting it up! As a follow-up, have you considering looking into setting up PurgeCSS? It's a popular tool to pair with Tailwind, since it'll find and remove all classes you're not using from the stylesheet.

Jake Dohm • Jan 5 '19

Hey Max!

A couple people have mentioned that, so I think I'll post another short article on how to set that up. In the meantime, this starter has Tailwind (via PostCSS) and PurgeCSS set up: github.com/taylorbryant/gatsby-sta...