close

[Solved] Error: PostCSS plugin tailwindcss requires PostCSS 8

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 ?

  1. 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.

  2. 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

7 thoughts on “[Solved] Error: PostCSS plugin tailwindcss requires PostCSS 8”

  1. 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**.

    Reply

Leave a Comment