Update blog-starter to use Tailwind CSS v1.4's new built-in purge option (#12452)

examples/blog-starter/README.md

@@ -53,3 +53,7 @@ yarn dev
 Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/zeit/next.js/discussions).
 
 Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+# Notes
+
+This blog-starter uses [Tailwind CSS](https://tailwindcss.com). To control the generated stylesheet's filesize, this example uses Tailwind CSS' v1.4 [`purge` option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) to remove unused CSS.

examples/blog-starter/package.json

@@ -18,9 +18,8 @@
     "remark-html": "10.0.0"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^2.1.0",
     "dotenv": "8.2.0",
     "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^1.2.0"
+    "tailwindcss": "^1.4.0"
   }
 }

examples/blog-starter/postcss.config.js

 module.exports = {
-  plugins: [
-    'tailwindcss',
-    ...(process.env.NODE_ENV === 'production'
-      ? [
-          [
-            '@fullhuman/postcss-purgecss',
-            {
-              content: [
-                './pages/**/*.{js,jsx,ts,tsx}',
-                './components/**/*.{js,jsx,ts,tsx}',
-              ],
-              defaultExtractor: content =>
-                content.match(/[\w-/:]+(?<!:)/g) || [],
-            },
-          ],
-        ]
-      : []),
-    'postcss-preset-env',
-  ],
+  plugins: ['tailwindcss', 'postcss-preset-env'],
 }

examples/blog-starter/styles/index.css

-/* purgecss start ignore */
 @tailwind base;
+
+/* Write your own custom base styles here */
+
+/* Start purging... */
 @tailwind components;
-/* purgecss end ignore */
+/* Stop purging. */
+
+/* Write you own custom component styles here */
+
+/* Start purging... */
 @tailwind utilities;
+/* Stop purging. */
+
+/* Your own custom utilities */

examples/blog-starter/tailwind.config.js

 module.exports = {
+  purge: ['./components/**/*.js', './pages/**/*.js'],
   theme: {
     extend: {
       colors: {