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