DEV Community

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

Hunter Chang on 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 clas...

Read full post

Pedro Filho • Oct 27 '19

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

Salvador Emmanuel • Oct 14 '20 • 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.divw-full bg-center h-full bg-cover
and mixed

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

Salvador Emmanuel • Oct 14 '20

image

Tom Gooden✨ • Feb 15 '20

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

Enrico Icardi • Apr 24 '20

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

Salvador Emmanuel • Oct 14 '20

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}"]

Hunter Chang • Apr 26 '20

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!