From 0c389225257c21120db003925d929cacbe1381cf Mon Sep 17 00:00:00 2001
From: Yuri Yakovlev <hi@mynameisyuri.com>
Date: Fri, 20 Nov 2020 19:18:49 +0100
Subject: [PATCH] Update Tailwind example to v2.0 (#19278)

- Bump the Tailwind version to v2.0
- Add necessary latest `postcss` and `autoprefixer` deps
- Clean the tw config a bit
- Add dark mode styles
---
 examples/with-tailwindcss/components/nav.js  | 10 ++++++----
 examples/with-tailwindcss/package.json       |  6 +++---
 examples/with-tailwindcss/pages/index.js     |  4 ++--
 examples/with-tailwindcss/postcss.config.js  | 17 +----------------
 examples/with-tailwindcss/styles/index.css   |  7 ++++++-
 examples/with-tailwindcss/tailwind.config.js |  9 ++++-----
 6 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/examples/with-tailwindcss/components/nav.js b/examples/with-tailwindcss/components/nav.js
index 5034568696..cff649ba0b 100644
--- a/examples/with-tailwindcss/components/nav.js
+++ b/examples/with-tailwindcss/components/nav.js
@@ -8,16 +8,18 @@ const links = [
 export default function Nav() {
   return (
     <nav>
-      <ul className="flex justify-between items-center p-8">
+      <ul className="flex items-center justify-between p-8">
         <li>
           <Link href="/">
-            <a className="text-blue-500 no-underline">Home</a>
+            <a className="text-blue-500 no-underline text-accent-1 dark:text-blue-300">
+              Home
+            </a>
           </Link>
         </li>
-        <ul className="flex justify-between items-center space-x-4">
+        <ul className="flex items-center justify-between space-x-4">
           {links.map(({ href, label }) => (
             <li key={`${href}${label}`}>
-              <a href={href} className="btn-blue no-underline">
+              <a href={href} className="no-underline btn-blue">
                 {label}
               </a>
             </li>
diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json
index d13faf03e8..98034b54f0 100644
--- a/examples/with-tailwindcss/package.json
+++ b/examples/with-tailwindcss/package.json
@@ -12,9 +12,9 @@
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "postcss-flexbugs-fixes": "4.2.1",
-    "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^1.7.4"
+    "autoprefixer": "10.0.2",
+    "postcss": "8.1.7",
+    "tailwindcss": "^2.0.1"
   },
   "license": "MIT"
 }
diff --git a/examples/with-tailwindcss/pages/index.js b/examples/with-tailwindcss/pages/index.js
index bcd5455cdb..d347bc6288 100644
--- a/examples/with-tailwindcss/pages/index.js
+++ b/examples/with-tailwindcss/pages/index.js
@@ -5,8 +5,8 @@ export default function IndexPage() {
     <div>
       <Nav />
       <div className="py-20">
-        <h1 className="text-5xl text-center text-accent-1">
-          Next.js + Tailwind CSS
+        <h1 className="text-5xl text-center text-gray-700 dark:text-gray-100">
+          Next.js + Tailwind CSS 2.0
         </h1>
       </div>
     </div>
diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js
index 6f2d25c4e3..9fb517645a 100644
--- a/examples/with-tailwindcss/postcss.config.js
+++ b/examples/with-tailwindcss/postcss.config.js
@@ -1,18 +1,3 @@
 module.exports = {
-  plugins: [
-    'tailwindcss',
-    'postcss-flexbugs-fixes',
-    [
-      'postcss-preset-env',
-      {
-        autoprefixer: {
-          flexbox: 'no-2009',
-        },
-        stage: 3,
-        features: {
-          'custom-properties': false,
-        },
-      },
-    ],
-  ],
+  plugins: ['tailwindcss', 'autoprefixer'],
 }
diff --git a/examples/with-tailwindcss/styles/index.css b/examples/with-tailwindcss/styles/index.css
index e668c3b2e8..b7b34b34af 100644
--- a/examples/with-tailwindcss/styles/index.css
+++ b/examples/with-tailwindcss/styles/index.css
@@ -6,9 +6,14 @@
 @tailwind components;
 /* Stop purging. */
 
+html,
+body {
+  @apply bg-gray-50 dark:bg-gray-900;
+}
+
 /* Write your own custom component styles here */
 .btn-blue {
-  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
+  @apply px-4 py-2 font-bold text-white bg-blue-500 rounded;
 }
 
 /* Start purging... */
diff --git a/examples/with-tailwindcss/tailwind.config.js b/examples/with-tailwindcss/tailwind.config.js
index 65167cc61c..ab62710946 100644
--- a/examples/with-tailwindcss/tailwind.config.js
+++ b/examples/with-tailwindcss/tailwind.config.js
@@ -1,9 +1,6 @@
 module.exports = {
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
-  },
   purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'media', // 'media' or 'class'
   theme: {
     extend: {
       colors: {
@@ -11,6 +8,8 @@ module.exports = {
       },
     },
   },
-  variants: {},
+  variants: {
+    extend: {},
+  },
   plugins: [],
 }
-- 
GitLab