Purgecss: PurgeCSS does not work with Gulp 4+ and TailwindCSS 1+

[HamedFathi]

Describe the bug
Recently, I made a project with TailwindCSS 1+, PurgeCSS, and Gulp.
You can find the repository here.

The gulp task:

gulp.task('css', function () {
    return gulp.src('tailwind.css')
        // ...
        .pipe(postcss([
            // ...
            tailwindcss('tailwind-config.js'),
            ...when(config.productionMode, require('@fullhuman/postcss-purgecss')({
                content: [
                    path.resolve(__dirname, '/**/*.html')
                ],
                defaultExtractor: content => content.match(/[A-Za-z0–9-_:/]+/g) || []
            })),
            require('autoprefixer'),
            ...when(config.productionMode, require('cssnano')()),
            // ...
        ]))
        // ...
        .pipe(gulp.dest('dist'));
});

When I build the application in productionMode PurgeCSS does not work.
The final output has changed but does not work properly when it's displayed.

To Reproduce
Steps to reproduce the behavior:

1. Clone my repository.
2. npm install
3. run the application node_modules/.bin/gulp run in "productionMode": true

• package.json >> "productionMode": true,

Expected behavior
I expect to work only!

Screenshots
Without PurgeCSS:

With PurgeCSS:

Desktop (please complete the following information):

• OS: Windows 10
• Version of Purgecss 1.2.0
• Version of gulp-postcss 8.0.0

[dhymik]

I had a similar issue with gulp 4.x and Tailwind 1.2.

I changed the default extractor pattern, as suggested on the Tailwind website here, to:

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

after this change, my css worked again.