Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Removing Unused CSS in Tailwind with PurgeCSS

    Simon VrachliotisSimon Vrachliotis

    When you create new utilities, variants, breakpoints in Tailwind, the file size of your generated CSS bundle can become quite large. Adding PurgeCSS as a build step makes this worry go away and shrinks your CSS down by removing any class that is never used.

    tailwindTailwind
    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Man 1: 00:00 Here is a simple out-of-the-box set of utility classes generated with the default tailwind config. If we open up the devtools, you can see that the Compass css is 272 kilobyte heavy. Unminified and indecipherable , that is.

    00:15 As you add custom utility classes, colors, breakpoints and state variance, your bundle size will become larger and larger. Fear not, though. With a simple, extra step in your build workflow, you can make all the extra unused bloat go away.

    00:29 Let's install gulp purgecss quickly. We can now require it in our gulp file -- const purgecss = require('gulp-purgecss'). Right after running our css through tailwind, we'll pipe that into purgecss. We need to pass a content value which is, in our case, any html file in our distpath.

    00:51 All right, let's try to run gulp again and see what happens. Let's hard refresh the page and...Wow! 7.5 kilobytes. That was well worth the effort. If we look at our compile styles now, we only have the class name using the html page, background purple, font sense margin bottom -- 1. Let's comment out that purgecss step for a second, and rerun gulp. Refresh the page, and yep, we're back to 272.

    Discuss

    Discuss