DEV Community

Hunter Chang
Hunter Chang

Posted on • Updated on • Originally published at

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

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.

Subscribe if you liked this video!:

Follow Me On:

Top comments (7)

pedroapfilho profile image
Pedro Filho

Nice article and video! Could you make one to use with styled-components?

kainmaligno profile image
Salvador Emmanuel • Edited

you can write the same way the styled component just like this with emotion

import tw, { styled } from "twin.macro"
export const Hero = tw.div

and mixed

export const Title1 = styled.div
text-silver text-center text-4xl font-bold mt-3 mb-3}
color: ${(props) => (props.color ? "#e0e2db" : "text-gray-300")};

kainmaligno profile image
Salvador Emmanuel


good3n profile image
Tom Gooden✨

+1 -- I think most people would get more benefit from this if you used styled-components.

ricricucit profile image
Enrico Icardi

Thanks for this.
Question: is the "sizes" object also being Purged?

kainmaligno profile image
Salvador Emmanuel

I use gatsby-plugin-purgecss to purge all

      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: false,
        develop: false,
        tailwind: true,

and in to the tailwind.config.js use this

 purge: ["./components/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"]
changoman profile image
Hunter Chang

Great question, I'm actually not sure lol. I'd have to test that out when I get some time. If anyone else knows please enlighten us!