Add a production build script with Purgecss and cssnano

Author: adamwathan

README.md

@@ -33,3 +33,19 @@ To get started:
     Now you should be able to see the project running at localhost:8080.
 
 4. Open `index.html` in your editor and start experimenting!
+
+## Building for production
+
+Even though this isn't necessarily a starter kit for a proper project, we've included an example of setting up both [Purgecss](https://www.purgecss.com/) and [cssnano](https://cssnano.co/) to optimize your CSS for production.
+
+To build an optimized version of your CSS, simply run:
+
+```bash
+# Using npm
+npm run production
+
+# Using Yarn
+yarn run production
+```
+
+After that's done, check out `./dist/tailwind.css` to see the optimized output.

package.json

@@ -1,13 +1,17 @@
 {
   "scripts": {
-    "serve": "concurrently \"postcss tailwind.css -o dist/tailwind.css --watch\"  \"live-server .\""
+    "serve": "NODE_ENV=development concurrently \"postcss tailwind.css -o dist/tailwind.css --watch\"  \"live-server .\"",
+    "development": "NODE_ENV=development postcss tailwind.css -o dist/tailwind.css",
+    "production": "NODE_ENV=production postcss tailwind.css -o dist/tailwind.css"
   },
   "dependencies": {
     "autoprefixer": "^9.5.1",
     "tailwindcss": "^1.0.0-beta.8"
   },
   "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^1.2.0",
     "concurrently": "^4.1.0",
+    "cssnano": "^4.1.10",
     "live-server": "^1.2.1",
     "postcss-cli": "^6.1.2"
   }

postcss.config.js

@@ -1,6 +1,14 @@
+const purgecss = require('@fullhuman/postcss-purgecss')({
+  content: ['./*.html'],
+  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
+})
+
 module.exports = {
   plugins: [
     require('tailwindcss'),
     require('autoprefixer'),
+    ...process.env.NODE_ENV === 'production'
+      ? [purgecss, require('cssnano')]
+      : []
   ]
 }