feat(examples:tailwind): add postcss-preset-env

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

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

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'
   ],
 }

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

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%;