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

@@ -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>

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"
 }

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>

examples/with-tailwindcss/postcss.config.js

 module.exports = {
-  plugins: [
-    'tailwindcss',
-    'postcss-flexbugs-fixes',
-    [
-      'postcss-preset-env',
-      {
-        autoprefixer: {
-          flexbox: 'no-2009',
-        },
-        stage: 3,
-        features: {
-          'custom-properties': false,
-        },
-      },
-    ],
-  ],
+  plugins: ['tailwindcss', 'autoprefixer'],
 }

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... */

examples/with-tailwindcss/tailwind.config.js

 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: [],
 }