PurgeCSS and Tailwind CSS, how to preserve responsive classes using the Command Line Interface?

PurgeCSS relies on extractors to get the list of selectors used in a file. It provides a default extractor that is working fine with a wide variety of file types, but it can be limited and does not fit every CSS framework out there.

The default extractor considers every word of a file as a selector but it doesn't consider special characters like the colon (:) which is heavily used in Tailwind CSS.

So, by default, PurgeCSS removes responsive (md:px-6), hover (hover:bg-gray-500), etc. classes. To avoid this, Tailwind has its own extractor. You could use this (or your very own) extractor but the PurgeCSS CLI has limited options and it's missing a defaultExtractor option.

Luckily, it accepts a config file option, so if you create your own purgecss.config.js file and add a default extractor in there, it will preserve these classes too. You can also add your other options to this file.

I used to use this simple extractor which will work for you too:

(content) => content.match(/[\w-/:]+(?<!:)/g) || []

Your config file will look like this:

// purgecss.config.js
module.exports = {
  content: ['build/**/*.html'],
  css: ['build/static/css/main.css'],
  defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
  output: 'static/css/main.css',
};

And you can use the following command to run PurgeCSS with the above config:

purgecss --config ./purgecss.config.js