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

Ask A Question

Notifications

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: [
    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?

Reply
Reply

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.

Reply

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

Reply

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 :)

Reply

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 https://tailwindcss.com/docs/controlling-file-size

Reply
Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.