Tailwind CSS + Gulp + PurgeCSS Removing Some Classes Used In Code But Compiling Others - gulp

Question

I'm currently attempting to use Tailwind CSS with gulp and purgeCSS in a WordPress project.
Everything runs as expected and the CSS files are compiling however certain classes don't make it into the compiled CSS no matter how they're used in the markup.
For example, the background color classes, i.e. "bg-white" are included in various theme files, but whenever the CSS recompiles, that class is purged. It was the same with the "margin-top" classes, but not any of the other margin classes.
Here is my gulp file:
var postcss = require('gulp-postcss');
var cssImport = require('postcss-import');
var gulp = require('gulp');
var cssvars = require('postcss-simple-vars');
var nested = require('postcss-nested');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var purgecss = require('gulp-purgecss')
var sass = require('gulp-sass');
var gcmq = require('gulp-group-css-media-queries');
var uglify = require('gulp-uglify-es').default;
var del = require('del');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require('gulp-util');
var babel = require('gulp-babel');
// ============================================================================
// Main Tasks
// ============================================================================
// Default task is build
gulp.task('default', ['build']);
// Development task (watch alias)
gulp.task('dev', ['watch']);
// Build task
gulp.task('build', ['clean'], function() {
gulp.start(['styles', 'scripts']);
});
// Styles task
gulp.task('styles', function() {
return gulp.src([
'./assets/sass/*.scss'
])
.pipe(sass().on('error', sass.logError))
// .pipe(sourcemaps.init())
.pipe(postcss([
require('postcss-import'),
require('tailwindcss'),
autoprefixer(),
// cssnano()
], {
syntax: require('postcss-scss')
}))
.pipe(purgecss({
content: ['./*.php', './templates/*.php', './partials/*.php', './components/*.php'],
extractors: [
{
extractor: content => {
return content.match(/[A-Za-z0-9-_:\/]+/g) || []
// return content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
// return content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
//return content.match(/[\w-/:]+(?<!:)/g) || [];
},
extensions: ['css', 'php', 'html']
}
],
safelist: {
standard: [/^[^-]*mt-*/, /^[^-]*bg-opacity-*/, /^[^-]*bg-white/]
}
}))
.pipe(gulp.dest('./assets/css/'))
});
// Scripts task
gulp.task('scripts', function() {
return gulp.src([
'./node_modules/mmenu-light/dist/mmenu-light.js',
'./node_modules/mmenu-light/dist/mmenu-light.polyfills.js',
'./assets/js/util-scripts.js',
'./assets/vendors/micromodal/micromodal.min.js',
'./assets/vendors/waypoints/lib/jquery.waypoints.js',
'./assets/js/core-js.js',
'./assets/js/theme-js.js'
])
// .pipe(sourcemaps.init())
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(concat('theme-js.dist.js'))
.pipe(uglify())
// .pipe(sourcemaps.write())
.pipe(gulp.dest('./assets/dist/js/'))
});
// ============================================================================
// Build Tasks
// ============================================================================
/**
* Clean directories
*
* #since 0.1.0
*/
gulp.task('clean', function() {
del([
'./assets/css/*.css',
'!./assets/css/font-awesome.min.css',
'./assets/js/*.dist.js'
]);
});
// END BUILD
// ============================================================================
// Dev Tasks
// ============================================================================
/**
* Execute tasks when files are change and live reload web page, and servers
*
* #since 0.1.0
*/
gulp.task('watch', function() {
gulp.watch('./assets/sass/**/*.scss', ['styles']);
gulp.watch('./assets/js/*.js', ['scripts']);
// gulp.watch('./assets/images/*', ['images']);
gulp.watch("*.html", ['bs-reload']);
});
I also tried a variety of extractor regex matches, but none of them seem to work.
Oddly enough, when I add this into the theme configuration of my tailwind.config.js file the background class does compile
backgroundColor: {
'white': '#fff'
},
It seems the vast majority of classes are compiling though so unsure if it's my purgeCSS configuration or some other configuration that I'm missing in tailwind?