diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md index f5fb1fc7e791c4586c548b9811041fc1ad1148be..557e99494b074e56fb4f69ab55f67d755b66fb7b 100644 --- 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 index 12df82de292e1be05630d68216110e1313204b74..1b31e147fb4986829351feec34f175d8b82fbc7e 100644 --- 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 index cf3158c4b64da02273cb4b0ff6f0176a6427e343..0daed9b0738d9a220928bd7004afbb02ad1a7c8c 100644 --- 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 index 5a2ab8e1c184adafc59f899061dc0deccf267d49..bdf18229e839575f7fd5e5678ca0691b84c332b0 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; }