Skip to main content

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

General • Asked by Chris Oliver

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?

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.

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 22,346+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.