Ask A Question


You’re not receiving notifications from this thread.

How to Remove Unused CSS Classes from Tailwind CSS, Boostrap, and more with PurgeCSS Discussion

How does this work with .haml templates instead of .erb?


I'm haven't watched the video and never used PurgeCss but I assume you would need to add matcher for .haml files.

/ postcss.config.js

let environment = {
  plugins: [
      autoprefixer: {
        flexbox: 'no-2009'
      stage: 3

// Only run PurgeCSS in production (you can also add staging here)
if (process.env.RAILS_ENV === "production") {
      content: [

            // Matcher for haml

      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []

module.exports = environment

Yup, exactly that. Match haml files instead of erb.


That's what I tried and can't get it to work. Does Rails first render the .haml into HTML and then PurgeCSS reads it or does PurgeCSS have ability to read HAML and ERB?


Good job! Thanks!


OK, I figured out what I did wrong.

I thought this was able to work with the Rails Asset Pipeline, but now I realize it does not.

Installing Tailwind CSS sets it up in the javascript/css directory which is where PurgeCSS gets it from.

Since I'm not a fan of Tailwind (don't like having loads of CSS classes attached to my divs) and prefer Bootstrap, I was hoping this would also work with the Bootstrap gem. I see that it needs some extra config to load Bootstrap through the Webpacker CSS pipeline.


If you're a fan of Bootstrap, you will learn to LOVE Tailwind. I had the same initial reaction to Tailwind as you did but if you dig just beyond the surface, you'll see that Tailwind is superior to Bootstrap in several ways.

Check out the screencast on how to implement components that extract your common utility patterns. This is what Bootstrap is kind of doing for you but with Tailwind, you can customize to your heart's desire and implement your own unique designs quickly as opposed to "this is just another Bootstrap site/app".


If anyone runs into a problem like (Like I just spent way to long debugging):

TypeError: Cannot read property 'names' of undefined

This is due to running postcss-purgecss not @fullhuman/postcss-purgecss, running yarn remove postcss-purgecss solved it for me :)


Don't forget "./app/**/*.js.erb", if you are using them.


Also, the newer versions of tailwind have purge built in to make this super simple! Just add your paths to tailwind config


Tailwindcss now has purge built in (thanks @ScottKnight I'm just making your comment more visible instead of as a reply). Follow the Tailwind docs for "optimizing for production" to see if it covers what you need.


Would anyone know how to do this for esbuild?


Rails 7 rails new gives options for esbuild and tailwind 3... Use those and you'll have a working example in a few seconds. Tailwind3 purges out the box.

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 83,038+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.