purgecss

config-overrides.js

@@ -1,5 +1,17 @@
 module.exports = {
     webpack: function (config, env) {
+        const purgecss = require('@fullhuman/postcss-purgecss')({
+
+            // Specify the paths to all of the template files in your project
+            content: [
+                './src/**/*.html',
+                './src/**/*.jsx',
+                './src/**/*.tsx',
+            ],
+
+            // Include any special characters you're using in this regular expression
+            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
+        });
 
         config.module.rules.push({
             test: /\.css$/,
@@ -12,6 +24,9 @@ module.exports = {
                             require('tailwindcss'),
                             require('postcss-nested'),
                             require('autoprefixer'),
+                            ...process.env.NODE_ENV === 'production'
+                                ? [purgecss]
+                                : []
                         ],
                     },
                 },

package.json

@@ -53,5 +53,8 @@
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --env=jest-environment-jsdom-sixteen"
+  },
+  "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^2.1.2"
   }
 }

src/index.css

@@ -1,7 +1,12 @@
-@tailwind base;
-@tailwind components;
+/* purgecss start ignore */
+@tailwind  base;
+@tailwind  components;
+/* purgecss end ignore */
+
 @tailwind utilities;
 
+/* purgecss start ignore */
+
 html,
 body,
 #root {
@@ -321,3 +326,5 @@ dd {
         @apply w-4/5;
     }
 }
+
+/* purgecss end ignore */