错误：PostCSS 插件 tailwindcss 需要 PostCSS 8

Question

我安装了新的 tailwindcss 2.0 版，但出现以下错误。我试图卸载 postcss 和 tailwindcss 但它不起作用。需要帮忙。

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

这是我的 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

您正在将 Tailwind 与依赖于旧版 PostCSS 的工具集成。您可以使用此文档https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

Answer 2

npm uninstall tailwindcss postcss autoprefixer

然后

vue add tailwind 

使用 vue cli 插件https://www.npmjs.com/package/vue-cli-plugin-tailwind

Answer 3

为我工作：

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

Answer 4

下面的这个解决方案应该可以完美地工作。

运行以下命令

npm uninstall tailwindcss postcss autoprefixer

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

编辑：删除了一些错误的空格。

Answer 5

接受的答案现已过时。

从 v2.0 开始，Tailwind CSS 依赖于 PostCSS 8。之前接受的答案说明了如何降级到 PostCSS 8

相反，请执行以下操作以使所有内容在所有最新版本上运行

yarn add @storybook/addon-postcss

然后编辑你的.storybook/main.js

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
};

https://storybook.js.org/addons/@storybook/addon-postcss

@dlporter98

Answer 6

当我尝试卸载并安装紧凑版本时，出现依赖关系树错误。所以我不得不安装，yarn它可以工作。

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

Answer 7

使用 Vue 3 和 Tailwindcss 3

1. 创造tailwind.config.js
2. 创造postcss.config.js
3. 添加以下内容postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {
      config: './tailwind.config.js'
    }
  }
}

上述配置适用于最新的 postcss、autoprefixer、vue 3 和 tailwind 3

Answer 8

卸载 Tailwind 并使用兼容性版本重新安装

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

Answer 9

要解决此错误，请卸载 Tailwind 并使用兼容性版本重新安装：

npm uninstall tailwindcss postcss autoprefixer

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

Tailwind 文档 v2的解决方案

Answer 10

你必须对uninstall所有这些

npm uninstall autoprefixer postcss tailwindcss

然后运行这个命令，它会tailwind.css自动生成文件

vue add tailwind 

Answer 11

上面的解决方案解决了 TaildWindCss PostCss 问题，但我遇到了另一个错误，即：

TypeError: getProcessedPlugins is not a function

解决方案是升级 Node 版本，在我的例子中，我从 v10 升级到 v15，这解决了我的问题。