Purgecss: Example how to whitelist certain dynamic classes

[Pab89]

Hi i played around with purgecss alot today, but i cant seem to get it to whitelist certain classes, can you provide af section in the documentation on how to whitelist classes that would be a great help. :)

[vesper8]

Following.. I also can't get css whitelisting to work

[Pab89]

Below here is an example of how i tryed to make it work in a laravel project using laravel.mix which is based on webpack.

new PurgecssPlugin({
        paths: glob.sync([
           path.join(__dirname, "resources/views/**/*.blade.php"),
           path.join(__dirname, "resources/assets/js/**/*.vue"),
        ]),
       extractors: [
       {
          extractor: TailwindExtractor,
          extensions: ["html", "js", "php", "vue"]
       },
    ],
   whitelist: ['-ml-48','pl-48']
})

[Ffloriel]

There are 2 different properties that can be used to whitelist: whitelistPatters and whitelist.
whitelist takes an array of string, Selector matching one of the string will be included to the final css.
whitelistPatters works the same way but accepts an array of regular expressions. You can then whitelist
every selector ending with -ml-48 if you want with the following:

whitelistPatterns: [/-ml-48$/]

[Pab89]

Thanks for your answer but as showed in my comment before yours i am already trying to use whitelist but with no effect. whitelist: ['-ml-48','pl-48']

[Ffloriel]

I am sorry for the misunderstanding, when I saw -ml-48, I thought you wanted to whitelist classes ending with -ml-48. Below is an example of whitelist:

const testWhitelist = ['random', 'yep', 'button']
const testWhitelistPatterns = [/red$/]
let purgecss = new Purgecss({
    content: [], // content
    css: [], // css
    whitelist: testWhitelist,
    whitelistPatterns: testWhitelistPatterns
})

.random, #yep, 'button' will be left in the final css.
selector ending with red like .bg-red will be left as well.

[Ffloriel]

The documentation is still in progress but you can find some information about whitelisting here.
Let me know if you encounter any issues with whitelist

[hotmeteor]

Sorry to comment on a closed issue, but I've noticed that the whitelist setting only works when I don't prefix my classes with a .. Is this desired?

[Ffloriel]

Yes, my example is incorrect, it works with the name of the selector only. Thank you for noticing the error. I have updated the example.