Use tailwind's in-built purgecss

gulpfile.js

@@ -23,30 +23,6 @@ const postcss = require("gulp-postcss");
 const tailwindcss = require("tailwindcss");
 const rename = require("gulp-rename");
 const assets = require("postcss-assets");
-const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
-  content: [
-    "./source/**/*.mustache",
-    "./source/**/*.json",
-    "./source/**/*.js",
-    "./source/**/*.vue",
-    "./public/**/*.html",
-  ],
-  defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
-  whitelistPatterns: [
-    /(sm|md|lg|xl)?(\\:)?w-\d\d?$/, // width
-    /(sm|md|lg|xl)?(\\:)?h-\d\d?$/, // height
-    /(sm|md|lg|xl)?(\\:)m.?-\d\d?$/, // margins
-    /(sm|md|lg|xl)?(\\:)p.?-\d\d?$/, // paddings
-    /max-w-*/, // maximum width
-    /grid-cols-\d\d?/, // grid columns
-    /col-span-\d\d?/, // grid spans
-    /row-span-\d\d?/, // grid spans
-    /grid-flow/, // grid flow
-    /(sm|md|lg|xl)(\\:)text-.*/,
-    // /text-*/,
-    /ico--*/, // icons
-  ],
-});
 
 
 function resolvePath(pathInput) {
@@ -222,30 +198,7 @@ function reloadJS(done) {
  * TAILWIND AND POSTCSS TASKS
  ******************************************************/
 
-gulp.task("tailwind-postcss:build", function (done) {
-  return gulp
-    .src("./source/css/style.pcss")
-    .pipe(
-      postcss([
-        require("postcss-import"),
-        tailwindcss("./tailwind.config.js"),
-        require("postcss-nested"),
-        // require('postcss-preset-env'),
-        require("postcss-custom-properties"),
-        require("autoprefixer"),
-        assets({
-          basePath: "source/",
-          loadPaths: ["images/"],
-        }),
-        require("postcss-clean"),
-      ])
-    )
-    .pipe(rename("styles.css"))
-    .pipe(gulp.dest(resolvePath(paths().public.css)))
-    .on("end", done);
-});
-
-gulp.task("tailwind-postcss:build:production", function (done) {
+gulp.task("tailwind-postcss", function (done) {
   return gulp
     .src("./source/css/style.pcss")
     .pipe(
@@ -261,7 +214,6 @@ gulp.task("tailwind-postcss:build:production", function (done) {
           loadPaths: ["images/"],
         }),
         require("postcss-clean"),
-        postcssPurgecss,
       ])
     )
     .pipe(rename("styles.css"))
@@ -296,7 +248,7 @@ function watch () {
   gulp.watch(
     postcssPaths,
     {useFsEvents: false},
-    gulp.series("tailwind-postcss:build", reloadCSS)
+    gulp.series("tailwind-postcss", reloadCSS)
   );
 
   console.log("Watching following source files:", jsPaths.concat(postcssPaths));
@@ -378,7 +330,8 @@ const buildJSBundle = (env) => {
       exclude: "node_modules/**/*",
       target: {
         chrome: 71,
-        firefox: 64
+        firefox: 64,
+        edge: 19
       },
     }),
     commonjs(),
@@ -425,13 +378,13 @@ gulp.task('rollup:build:production', buildJSBundle("production"));
 
 gulp.task(
   "site:build",
-  gulp.parallel("tailwind-postcss:build", "patternlab:build", "rollup:build")
+  gulp.parallel("tailwind-postcss", "patternlab:build", "rollup:build")
 );
 
 gulp.task(
   "site:build:production",
   // Build patternlab first to have all the necessary CSS classes ready for auto purge.
-  gulp.series("patternlab:build", gulp.parallel("tailwind-postcss:build:production", "rollup:build:production"))
+  gulp.series("patternlab:build", gulp.parallel("tailwind-postcss", "rollup:build:production"))
 );
 
 /******************************************************

package.json

@@ -35,8 +35,8 @@
   "scripts": {
     "postinstall": "node scripts/postinstall.js",
     "gulp": "gulp -- ",
-    "develop": "gulp patternlab:serve",
-    "build": "gulp",
+    "develop": "NODE_ENV=development gulp patternlab:serve",
+    "build": "NODE_ENV=production gulp",
     "make-version": "scripts/make-version.sh",
     "update-iconset": "scripts/update-iconset.js"
   },

tailwind.config.js

@@ -6,6 +6,30 @@ const lighen = (clr, val) => Color(clr).lighten(val).rgb().string();
 const darken = (clr, val) => Color(clr).darken(val).rgb().string();
 
 module.exports = {
+  purge: {
+    content: [
+      "./source/**/*.mustache",
+      "./source/**/*.json",
+      "./source/**/*.js",
+      "./source/**/*.vue",
+      "./public/**/*.html",
+    ],
+    options: {
+      whitelistPatterns: [
+        /^((sm|md|lg|xl)\:)?w-\d\d?/,
+        /^((sm|md|lg|xl)\:)?h-\d\d?/,
+        /^((sm|md|lg|xl)\:)?m.?-\d\d?/,
+        /^((sm|md|lg|xl)\:)?p.?-\d\d?/,
+        /^((sm|md|lg|xl)\:)?grid-cols-*/,
+        /^((sm|md|lg|xl)\:)?col-span-*/,
+        /^((sm|md|lg|xl)\:)?row-span-*/,
+        /^((sm|md|lg|xl)\:)?grid-flow-*/, // grid flow
+        /^text-*/,
+        /^max-w-*/, // maximum width
+        /ico--*/, // icons
+      ],
+    }
+  },
   theme: {
     extend: {
       maxWidth: {