feat(examples:tailwind): add postcss-preset-env (vercel#10160)

afzalsayed96 · Timer · Timer · commit b95214e2cdee · 2020-01-20T16:13:18.000-05:00
* feat(examples:tailwind): add postcss-preset-env

* fix: prettier

* Review changes

* Update README.md

Co-authored-by: Joe Haddad &lt;timer150@gmail.com&gt;
diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md
@@ -49,10 +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
@@ -13,8 +13,7 @@
   },
   "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
@@ -13,6 +13,6 @@ module.exports = {
           },
         ]
       : undefined,
-    'autoprefixer',
+    'postcss-preset-env',
   ],
 }
diff --git 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;
 }

Original file line number	Diff line number	Diff line change
`@@ -13,8 +13,7 @@`
`13`	`13`	`},`
`14`	`14`	`"devDependencies": {`
`15`	`15`	`"@fullhuman/postcss-purgecss": "^1.3.0",`
`16`		`- "autoprefixer": "^9.7.4",`
`17`		`- "postcss-import": "^12.0.1",`
	`16`	`+ "postcss-preset-env": "^6.7.0",`
`18`	`17`	`"tailwindcss": "^1.1.4"`
`19`	`18`	`}`
`20`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,6 @@ module.exports = {`
`13`	`13`	`},`
`14`	`14`	`]`
`15`	`15`	`: undefined,`
`16`		`- 'autoprefixer',`
	`16`	`+ 'postcss-preset-env',`
`17`	`17`	`],`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`.btn-blue {`
`2`		`- @apply .bg-blue-500 .text-white .font-bold .py-2 .px-4 .rounded;`
	`2`	`+ @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;`
`3`	`3`	`}`