The Right Way To Add Tailwind CSS to Gatsby with Purge CSS

October 26, 2019

In this video, we look at the right way to add Tailwind CSS to a Gatsby site. First we install Tailwind CSS and make a button with its utility classes.

During the gatsby build and gatsby serve we view the page source to see that all the Tailwind CSS classes have been included, which is very bad!

We add gatsby-plugin-purgecss to our Gatsby site to remove any CSS that we aren't using, which keeps our final file size small and pretty!

After that's all in place, I explore how we can make a re-useable Button component by passing in Props and Tailwind CSS classes.

If you like the YouTube content, please support it by subscribing to the channel!

Learn JavaScript and React

Here are some of my favorite courses for learning JavaScript and React. I have personally purchased each of these and found them extremely helpful when I was learning JavaScript and React.