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

npm uninstall tailwindcss postcss autoprefixer 

then

vue add tailwind  

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