7

I have the "full" 3.9 MB Tailwind CSS file and successfully applied PurgeCSS to reduce it to 9 kB. But it also purged all responsive classes like md:px-6, they don't show up in my purged version.

Note: this question is for using the command line interface (CLI)

This is what I did:

purgecss --css ~/Desktop/Projects/Flask/Project1/build/static/css/main.css --content ~/Desktop/Projects/Flask//Project1/build/**/*.html --output ~/Desktop/Projects/Flask/Project2/static/css/main.css

I chose to create the output file in a different folder (Project2) so that I could check on the input vs output.

One thing I tried is to add --safelist [/md/], but didn't help. In fact the safelist didn't seem to be used at all...

(I use CLI since it is part of a bigger Python Flask project)

Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
Tristan Bains
  • 123
  • 2
  • 7
  • I see I made a typo in the question itself, with a double slash in a file path, please ignore that. Question still holds – Tristan Bains Jan 03 '21 at 20:30

1 Answers1

15

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

Edit:

As Fred mentioned in their comment, if you also want to include classes like px-2.5, you'll need to add a . to the character set:

(content) => content.match(/[\w-/:.]+(?<!:)/g) || []
Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
  • 1
    Great, thanks! Works like a charm. I had to change the `output` folder in the `purgecss.config.js` file to make everything work in my specific flow, but that is a minor detail. – Tristan Bains Jan 06 '21 at 19:20
  • 2
    to also include classes such as `px-2.5` you'll want to match for `.` too, like so: `content.match(/[\w-:./]+(?<!:)/g) || []` (src: https://stackoverflow.com/a/60552953/827129) – fredrivett Mar 22 '22 at 14:01
  • To use classes like `.max-w-[800px]`, the extractor should be updated to `(content) => content.match(/[\w\-:.\/\[#%\]]+(?<!:)/g) || []` – Amin Ya Feb 19 '23 at 22:45