本文介绍了错误:PostCSS 插件 tailwindcss 需要 PostCSS 8的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我安装了新的 tailwindcss 2.0 版，但出现以下错误.我试图卸载 postcss 和 tailwindcss 但它不起作用.需要帮助.
模块构建失败(来自 ./node_modules/postcss-loader/src/index.js):错误:PostCSS 插件 tailwindcss 需要 PostCSS 8.最终用户迁移指南:https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users在 Processor.normalize (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)在新处理器(/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)在 postcss (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)在/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这是我的 package.json
"name": "nifo-school",版本":0.1.0"，私人":真的，脚本":{服务":vue-cli-service 服务"，构建":vue-cli-service 构建"，lint":vue-cli-service lint"，电子:构建":vue-cli-service电子:构建"，电子:服务":vue-cli-service电子:服务"，postinstall":electron-builder install-app-deps"，postuninstall":electron-builder install-app-deps"},main":background.js"，依赖关系":{反应":^16.3.0"，@ivanv/vue-collapse-transition":^0.2.1"，自动前缀":^10.0.2"，axios":^0.21.0"，core-js":^3.6.5"，电子":^8.0.0"，电子拖拽":^2.0.0"，jquery":^3.5.1"，js-cookie":^2.2.1"，postcss-cli":^=8.0"，反应崩溃":^ 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"},开发依赖":{@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"，电子开发工具安装程序":^3.1.0"，eslint":^6.7.2"，eslint-plugin-import":^2.20.2"，eslint-plugin-vue":^6.2.2"，lint-staged":^9.5.0"，节点-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":{预提交":lint-staged"},lint-staged":{*.{js,jsx,vue}":[vue-cli-service lint"，git add"]}}```感谢帮助 解决方案
您正在将 Tailwind 与依赖于旧版 PostCSS 的工具集成.您可以使用此文档 https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
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
解决方案
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
这篇关于错误:PostCSS 插件 tailwindcss 需要 PostCSS 8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！