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

Solution 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

Solution 2

npm uninstall tailwindcss postcss autoprefixer

then

vue add tailwind 

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

Solution 3

worked for me :

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

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

Solution 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

View more solutions