From 4fe6e9697bcb2bb3527831327f0bf488be00a086 Mon Sep 17 00:00:00 2001
From: Thomas Knickman <tknickman@gmail.com>
Date: Mon, 13 Dec 2021 10:25:45 -0500
Subject: [PATCH] chore(blog-starter): update tailwindcss to v3 (#32398)

Updates the [blog-starter](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) example to use the new [tailwindcss v3](https://tailwindcss.com/blog/tailwindcss-v3) by following the [upgrade guide](https://tailwindcss.com/docs/upgrade-guide).

Thanks!

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`
---
 examples/blog-starter/README.md          |  2 +-
 examples/blog-starter/package.json       |  6 +++---
 examples/blog-starter/styles/index.css   | 12 ------------
 examples/blog-starter/tailwind.config.js |  2 +-
 4 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/examples/blog-starter/README.md b/examples/blog-starter/README.md
index beb978227b03..cdeb9747b5f3 100644
--- a/examples/blog-starter/README.md
+++ b/examples/blog-starter/README.md
@@ -61,4 +61,4 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut
 
 # Notes
 
-This blog-starter uses [Tailwind CSS](https://tailwindcss.com). To control the generated stylesheet's filesize, this example uses Tailwind CSS' v2.0 [`purge` option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) to remove unused CSS.
+This blog-starter uses [Tailwind CSS](https://tailwindcss.com) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3).
diff --git a/examples/blog-starter/package.json b/examples/blog-starter/package.json
index 82d61419b449..1e6a6ae24c82 100644
--- a/examples/blog-starter/package.json
+++ b/examples/blog-starter/package.json
@@ -16,8 +16,8 @@
     "remark-html": "13.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "^10.2.1",
-    "postcss": "^8.2.4",
-    "tailwindcss": "^2.0.2"
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.4",
+    "tailwindcss": "^3.0.1"
   }
 }
diff --git a/examples/blog-starter/styles/index.css b/examples/blog-starter/styles/index.css
index 719e6c05b0d7..b5c61c956711 100644
--- a/examples/blog-starter/styles/index.css
+++ b/examples/blog-starter/styles/index.css
@@ -1,15 +1,3 @@
 @tailwind base;
-
-/* Write your own custom base styles here */
-
-/* Start purging... */
 @tailwind components;
-/* Stop purging. */
-
-/* Write you own custom component styles here */
-
-/* Start purging... */
 @tailwind utilities;
-/* Stop purging. */
-
-/* Your own custom utilities */
diff --git a/examples/blog-starter/tailwind.config.js b/examples/blog-starter/tailwind.config.js
index e32267d853ff..b176069a2c6b 100644
--- a/examples/blog-starter/tailwind.config.js
+++ b/examples/blog-starter/tailwind.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  purge: ['./components/**/*.js', './pages/**/*.js'],
+  content: ['./components/**/*.js', './pages/**/*.js'],
   theme: {
     extend: {
       colors: {