Error: PostCSS plugin tailwindcss requires PostCSS 8

Question

I installed the new tailwindcss version 2.0 and I've got the following error. I tried to uninstall postcss and tailwindcss but it does not work. Need help.

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
    at Processor.normalize (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
    at /Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/src/index.js:140:12

 @ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/util/SlideInfo.vue?vue&type=style&index=0&lang=css& 4:14-393 14:3-18:5 15:22-401
 @ ./src/components/util/SlideInfo.vue?vue&type=style&index=0&lang=css&
 @ ./src/components/util/SlideInfo.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Grades.vue?vue&type=script&lang=js&
 @ ./src/views/Grades.vue?vue&type=script&lang=js&
 @ ./src/views/Grades.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://172.20.12.3:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Here is my package.json

  "name": "nifo-school",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "react": "^16.3.0",
    "@ivanv/vue-collapse-transition": "^0.2.1",
    "autoprefixer": "^10.0.2",
    "axios": "^0.21.0",
    "core-js": "^3.6.5",
    "electron": "^8.0.0",
    "electron-drag": "^2.0.0",
    "jquery": "^3.5.1",
    "js-cookie": "^2.2.1",
    "postcss-cli": "^=8.0",
    "react-collapse": "^5.0.1",
    "summernote": "^0.8.18",
    "tailwindcss": "^2.0.1",
    "v-click-outside": "^3.1.2",
    "vue": "^2.6.11",
    "vue-html-editor": "^0.2.1",
    "vue-i18n": "^8.22.1",
    "vue-router": "^3.2.0",
    "vue2-editor": "^2.10.2",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "babel-eslint": "^10.1.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-vue": "^6.2.2",
    "lint-staged": "^9.5.0",
    "node-sass": "^4.12.0",
    "postcss": "^=8.1",
    "sass-loader": "^8.0.2",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
    "vue-template-compiler": "^2.6.11"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}```


Thanks for help

Answer 1

You're integrating Tailwind with a tool that relies on an older version of PostCSS. You can use this doc https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

Answer 2

worked for me :

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Answer 3

npm uninstall tailwindcss postcss autoprefixer

then

vue add tailwind 

to use the vue cli plugin https://www.npmjs.com/package/vue-cli-plugin-tailwind

Answer 4

This 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

EDIT: Removed some erranous spaces.

Answer 5

I was getting dependency tree error when I try uninstall and install with compact version. So I had to install with yarn instead and it works.

npm uninstall tailwindcss postcss autoprefixer
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Answer 6

Uninstall Tailwind and re-install using the compatibility build instead

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Answer 7

The above solution fixed TaildWindCss PostCss issue, but I faced another error, which is :

TypeError: getProcessedPlugins is not a function

The Solution for is to upgrade Node version, in my case I upgraded from v10 to v15 which fixed my issue.

Answer 8

you have to uninstall all these

npm uninstall autoprefixer postcss tailwindcss

Then run this command, it's will generate tailwind.css file automatically

vue add tailwind 

Answer 9

I got the same issue using laravel 8, So Try uninstalling tailwind using "npm uninstall tailwindcss" and install it back using

npm install tailwindcss@compat

then run "npx tailwindcss init" if you don't have the tailwing.config.js file

after then run npm run watch.

still follow up the laravel documentation for more when you get stuck https://laravel.com/docs/8.x/mix#tailwindcss

Answer 10

Oddly I had this issue on one dev machine . . . but not the other, with identical package.json file, and using identical node/npm (15.5/7.3). I deleted node_modules, reinstalled. Did not fix it.

Final fix, which is bizarre, is after the node module reinstall, all I did was:

npm uninstall tailwindcss

then

npm i tailwindcss --save-dev

(note, not using the compatibility package) and it worked fine. I do have to use --legacy-peer-deps when re-installing the node_modules, so somehow the order of installation mattered in my scenario . . .

Answer 11

I'm on a Mac using VueJS 3 (@vue/cli 4.5.11). For me the following two commands solved the issue:

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

This installed:

• tailwindcss 2.1.1
• postcss 8.2.10
• autoprefixer 10.2.5

Answer 12

Had the same issue and did the following to resolve;

1. Check your npm version using npm -ver, and make sure to install the latest version
2. Also check your Node version and update to the latest version through this URL: "https://nodejs.org/en/download/"

Answer 13

I tried everything and was still having TypeError: getProcessedPlugins is not a function error. What fixed the issue for me was upgrading the nodejs version.

To check the installed node version

node -v

my node version was v10.23.0 and was using Ubuntu. I upgraded to v14.15.4.

Here is how I upgraded node

sudo apt update
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
sudo apt-get install -y nodejs
node -v

also I cleaned the cache to be more sure

npm cache clean -f

After upgrading I deleted node_modules folder inside project. ran npm install and then ran npm run dev inside the project folder.

This is the only solution that worked for me, so sharing it.

Answer 14

To resolve this error, 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

Solution from Tailwind documentation