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...
Collapse
 
sebastienbarre profile image
Collapse
 
jakedohm_34 profile image
Jake Dohm

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!

Collapse
 
josephgoksu profile image
Joseph Goksu

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

✅ Correct One

@tailwind base;

@tailwind components;

@tailwind utilities;

Collapse
 
jakedohm_34 profile image
Jake Dohm

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

Collapse
 
hagnerd profile image
Matt Hagner

Cool tip, instead of running ./node_modules/.bin/tailwind init you can just run npx tailwind init.

Collapse
 
jakedohm_34 profile image
Jake Dohm

Ooh, that's awesome! Thanks!

Collapse
 
maxwell_dev profile image
Max Antonucci

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.

Collapse
 
jakedohm_34 profile image
Jake Dohm

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...

Collapse
 
pickleat profile image
Andy Pickle

Was just thinking about this today! Book marking for later!

Collapse
 
koryteg profile image
Kory Tegman

thanks jake! this worked great!