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: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }),
  ]
}

// Only run PurgeCSS in production (you can also add staging here)
if (process.env.RAILS_ENV === "production") {
  environment.plugins.push(
    require('@fullhuman/postcss-purgecss')({
      content: [

            // Matcher for haml
        './app/**/*.html.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.


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".

https://tailwindcss.com/course/composing-utilities-with-apply


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ 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.