Hello Guys, How are you all? Hope You all Are Fine. Today As I Installed tailwindcss And just after installing I am Facing the following error Error: PostCSS plugin tailwindcss requires PostCSS 8 in nodeJs. So Here I am Explain to you all the possible solutions here.
Without wasting your time, Let’s start This Article to Solve This Error.
How Error: PostCSS plugin tailwindcss requires PostCSS 8 Error Occurs ?
Today As I Installed tailwindcss And just after installing I am Facing the following error.
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
How To Solve Error: PostCSS plugin tailwindcss requires PostCSS 8 ?
- How To Solve Error: PostCSS plugin tailwindcss requires PostCSS 8 ?
To Solve Error: PostCSS plugin tailwindcss requires PostCSS 8 Just uninstall Tailwind and re-install using the compatibility build instead. Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the latest tag.
- Error: PostCSS plugin tailwindcss requires PostCSS 8
To Solve Error: PostCSS plugin tailwindcss requires PostCSS 8 Just uninstall Tailwind and re-install using the compatibility build instead. Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the latest tag.
Solution 1
Just uninstall Tailwind and re-install using the compatibility build instead:
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
The compatibility build is identical to the main build in every way, so you aren’t missing out on any features or anything like that.
Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the latest
tag:
npm uninstall tailwindcss
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Solution 2
This command worked for me.
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Solution 3
Just run
npm uninstall tailwindcss postcss autoprefixer
then
vue add tailwind
Solution 4
The solution below should work perfectly. Run the following commands
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Summery
It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?
Also Read
Hi, Thank you for your help.
thanks a lot for this, solution #3 worked perfectly
I had a similar error on building a Grafana plugin, but the dependencies are internal to the plugin (I can’t update them).
However, it worked for me just by using **yarn** instead of **npm**.
Thanks a lot Solution 3 worked for me
The 1st solution worked perfectly for me – thanks
The second solution worked out perfectly. Thanks!
It’s my Pleasure to Help You Sam. Thank You For Your Valuable words.