错误：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 3 并遇到此问题的用户，Tailwind 自己的故障排除中的the following instructions 为我解决了这个问题。

具体来说，更改您的启动和构建脚本：

"start": "concurrently \"npm run start:css\" \"react-scripts start\"",
"start:css": "tailwindcss -o src/tailwind.css --watch",
"build": "tsc && npm run build:css && react-scripts build",
"build:css": "NODE_ENV=production tailwindcss -o src/tailwind.css -m",

不过，您必须安装 concurrently 和 npm-run-all。

以下是我的postcss.config.js：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

这意味着您必须在项目的索引文件index.{tsx,js} 中导入tailwind.css 而不是index.css。

如果这对您有用，请记住您可能不再需要安装 @craco/craco。

Answer 2

虽然不使用 Vue，但我希望这可以帮助其他有类似问题的人。就我而言，我使用的是带有 Gulp (^4.0.2) 的 TailwindCSS，并且能够通过删除 tailwind 及其依赖项来解决错误：

npm uninstall tailwindcss gulp-postcss autoprefixer

然后再次安装它们，但明确指定 postcss 插件为版本 9：

npm install tailwindcss autoprefixer gulp-postcss@9

我尝试使用gulp-postcss@latest，但发现它一直在安装 8.3.1 版本并且没有解决错误。更多信息可以在这里看到：https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

否则，我会附和使用 Tailwind 兼容版本。

Answer 3

现在接受的答案已经过时了。

从 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 4

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

npm uninstall tailwindcss postcss autoprefixer

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

来自Tailwind documentation的解决方案

Answer 5

你必须uninstall所有这些

npm uninstall autoprefixer postcss tailwindcss

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

vue add tailwind 

Answer 6

我在使用 VueJS 3 (@vue/cli 4.5.11) 的 Mac 上。对我来说，以下两个命令解决了这个问题：

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

已安装：

• tailwindcss 2.1.1
• postcss 8.2.10
• 自动前缀 10.2.5

Answer 7

npm uninstall tailwindcss postcss autoprefixer

然后

vue add tailwind 

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

Answer 8

当我尝试使用压缩版本卸载和安装时，出现依赖关系树错误。所以我不得不改用yarn 安装它，它可以工作。

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

Answer 9

为我工作：

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

Answer 10

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

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

Answer 11

下面的这个解决方案应该可以完美运行。

运行以下命令

npm uninstall tailwindcss postcss autoprefixer

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

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

Answer 12

我尝试了所有方法，但仍然出现TypeError: getProcessedPlugins is not a function 错误。为我解决问题的是升级 nodejs 版本。

查看已安装的节点版本

node -v

我的节点版本是v10.23.0，使用的是 Ubuntu。我升级到v14.15.4。

这是我升级节点的方法

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

我还清理了缓存以更确定

npm cache clean -f

升级后我删除了项目中的 node_modules 文件夹。运行npm install，然后在项目文件夹中运行npm run dev。

这是唯一对我有用的解决方案，所以分享一下。

Answer 13

遇到了同样的问题，做了以下解决；

1. 使用 npm -ver 检查您的 npm 版本，并确保安装最新版本
2. 还要检查您的 Node 版本并通过以下 URL 更新到最新版本：“https://nodejs.org/en/download/”

Answer 14

奇怪的是，我在一台开发机器上遇到了这个问题。 . .但不是另一个，具有相同的 package.json 文件，并使用相同的 node/npm (15.5/7.3)。我删除了node_modules，重新安装。没修好。

奇怪的是，在重新安装节点模块后，我所做的只是：

npm uninstall tailwindcss

然后

npm i tailwindcss --save-dev

（注意，不使用兼容性包），它工作正常。在重新安装 node_modules 时，我确实必须使用--legacy-peer-deps，所以不知何故，安装顺序在我的场景中很重要。 . .

Answer 15

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

TypeError: getProcessedPlugins is not a function

解决方案是升级节点版本，在我的情况下，我从 v10 升级到 v15 解决了我的问题。

Answer 16

我在使用 laravel 8 时遇到了同样的问题，所以尝试使用“npm uninstall tailwindcss”卸载tailwind，然后使用

npm install tailwindcss@compat

如果没有 tailwing.config.js 文件，则运行“npx tailwindcss init”

然后运行 ​​npm run watch。

当您遇到困难时，请继续关注 laravel 文档以获取更多信息 https://laravel.com/docs/8.x/mix#tailwindcss

Answer 17

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