From 04bbc03abdb8fe466d03fce1a36c409b2f490d54 Mon Sep 17 00:00:00 2001
From: Afzal Sayed <afzal@keepworks.com>
Date: Sun, 19 Jan 2020 20:00:17 +0530
Subject: [PATCH 1/4] feat(examples:tailwind): add postcss-preset-env

---
 examples/with-tailwindcss/README.md         |  3 +--
 examples/with-tailwindcss/package.json      |  2 +-
 examples/with-tailwindcss/postcss.config.js |  3 ++-
 examples/with-tailwindcss/styles/button.css |  2 +-
 examples/with-tailwindcss/styles/index.css  | 10 +++++-----
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md
index f5fb1fc7e791c45..8b219fb8bd29b9d 100644
--- a/examples/with-tailwindcss/README.md
+++ b/examples/with-tailwindcss/README.md
@@ -49,9 +49,8 @@ now
 
 This setup is a basic starting point for using [Tailwind CSS](https://tailwindcss.com) with Next.js. This example also includes the following [PostCSS](https://github.com/postcss/postcss) plugins:
 
-- [autoprefixer](https://github.com/postcss/autoprefixer) - Adds vendor prefixes to CSS rules in your stylesheet using values from [Can I Use](https://caniuse.com/)
+- [postcss-preset-env](https://preset-env.cssdb.org/) - Adds stage 2+ features and autoprefixes
 - [purgecss](https://github.com/FullHuman/purgecss) - Removes unused CSS
-- [cssnano](https://cssnano.co/) - Minifies CSS
 - [postcss-easy-import](https://github.com/TrySound/postcss-easy-import) - Allows importing one stylesheet into another
 
 ## Limitations
diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json
index 12df82de292e1be..2836c41469d3fc3 100644
--- a/examples/with-tailwindcss/package.json
+++ b/examples/with-tailwindcss/package.json
@@ -13,8 +13,8 @@
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^1.3.0",
-    "autoprefixer": "^9.7.4",
     "postcss-import": "^12.0.1",
+    "postcss-preset-env": "^6.7.0",
     "tailwindcss": "^1.1.4"
   }
 }
diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js
index cf3158c4b64da02..3099be0140e8363 100644
--- a/examples/with-tailwindcss/postcss.config.js
+++ b/examples/with-tailwindcss/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: [
+    'postcss-import',
     'tailwindcss',
     process.env.NODE_ENV === 'production'
       ? [
@@ -13,6 +14,6 @@ module.exports = {
           },
         ]
       : undefined,
-    'autoprefixer',
+      'postcss-preset-env'
   ],
 }
diff --git a/examples/with-tailwindcss/styles/button.css b/examples/with-tailwindcss/styles/button.css
index 5a2ab8e1c184ada..bdf18229e839575 100644
--- a/examples/with-tailwindcss/styles/button.css
+++ b/examples/with-tailwindcss/styles/button.css
@@ -1,3 +1,3 @@
 .btn-blue {
-  @apply .bg-blue-500 .text-white .font-bold .py-2 .px-4 .rounded;
+  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
 }
diff --git a/examples/with-tailwindcss/styles/index.css b/examples/with-tailwindcss/styles/index.css
index 0338017f5bda5c4..82b0a685fbcfffc 100644
--- a/examples/with-tailwindcss/styles/index.css
+++ b/examples/with-tailwindcss/styles/index.css
@@ -1,10 +1,10 @@
-@import './button.css';
-
 /* purgecss start ignore */
-@tailwind base;
-@tailwind components;
+@import "tailwindcss/base";
+@import "tailwindcss/components";
 /* purgecss end ignore */
-@tailwind utilities;
+@import "tailwindcss/utilities";
+
+@import './button.css';
 
 .hero {
   width: 100%;

From b4f8c7fb55b4018ca755dd7b8c3d59cc60744f85 Mon Sep 17 00:00:00 2001
From: Afzal Sayed <afzal@keepworks.com>
Date: Sun, 19 Jan 2020 20:29:54 +0530
Subject: [PATCH 2/4] fix: prettier

---
 examples/with-tailwindcss/postcss.config.js | 2 +-
 examples/with-tailwindcss/styles/index.css  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js
index 3099be0140e8363..8535897a9d13d12 100644
--- a/examples/with-tailwindcss/postcss.config.js
+++ b/examples/with-tailwindcss/postcss.config.js
@@ -14,6 +14,6 @@ module.exports = {
           },
         ]
       : undefined,
-      'postcss-preset-env'
+    'postcss-preset-env',
   ],
 }
diff --git a/examples/with-tailwindcss/styles/index.css b/examples/with-tailwindcss/styles/index.css
index 82b0a685fbcfffc..5f7d4703ba406c6 100644
--- a/examples/with-tailwindcss/styles/index.css
+++ b/examples/with-tailwindcss/styles/index.css
@@ -1,8 +1,8 @@
 /* purgecss start ignore */
-@import "tailwindcss/base";
-@import "tailwindcss/components";
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
 /* purgecss end ignore */
-@import "tailwindcss/utilities";
+@import 'tailwindcss/utilities';
 
 @import './button.css';
 

From 7b849a0be57c2e6cd408891bf54935606aeeaa37 Mon Sep 17 00:00:00 2001
From: Afzal Sayed <afzal@keepworks.com>
Date: Mon, 20 Jan 2020 00:48:11 +0530
Subject: [PATCH 3/4] Review changes

---
 examples/with-tailwindcss/package.json      |  1 -
 examples/with-tailwindcss/postcss.config.js |  1 -
 examples/with-tailwindcss/styles/index.css  | 10 +++++-----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json
index 2836c41469d3fc3..1b31e147fb49868 100644
--- a/examples/with-tailwindcss/package.json
+++ b/examples/with-tailwindcss/package.json
@@ -13,7 +13,6 @@
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^1.3.0",
-    "postcss-import": "^12.0.1",
     "postcss-preset-env": "^6.7.0",
     "tailwindcss": "^1.1.4"
   }
diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js
index 8535897a9d13d12..0daed9b0738d9a2 100644
--- a/examples/with-tailwindcss/postcss.config.js
+++ b/examples/with-tailwindcss/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: [
-    'postcss-import',
     'tailwindcss',
     process.env.NODE_ENV === 'production'
       ? [
diff --git a/examples/with-tailwindcss/styles/index.css b/examples/with-tailwindcss/styles/index.css
index 5f7d4703ba406c6..0338017f5bda5c4 100644
--- a/examples/with-tailwindcss/styles/index.css
+++ b/examples/with-tailwindcss/styles/index.css
@@ -1,10 +1,10 @@
+@import './button.css';
+
 /* purgecss start ignore */
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
+@tailwind base;
+@tailwind components;
 /* purgecss end ignore */
-@import 'tailwindcss/utilities';
-
-@import './button.css';
+@tailwind utilities;
 
 .hero {
   width: 100%;

From 18d9256a4d7942fa1e61eba57aca60d2308bc7d0 Mon Sep 17 00:00:00 2001
From: Afzal Sayed <14029371+afzalsayed96@users.noreply.github.com>
Date: Mon, 20 Jan 2020 14:11:38 +0530
Subject: [PATCH 4/4] Update README.md

---
 examples/with-tailwindcss/README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md
index 8b219fb8bd29b9d..557e99494b074e5 100644
--- a/examples/with-tailwindcss/README.md
+++ b/examples/with-tailwindcss/README.md
@@ -51,7 +51,6 @@ This setup is a basic starting point for using [Tailwind CSS](https://tailwindcs
 
 - [postcss-preset-env](https://preset-env.cssdb.org/) - Adds stage 2+ features and autoprefixes
 - [purgecss](https://github.com/FullHuman/purgecss) - Removes unused CSS
-- [postcss-easy-import](https://github.com/TrySound/postcss-easy-import) - Allows importing one stylesheet into another
 
 ## Limitations