使用 vue 项目构建期间出现 Tailwind 错误答案

【问题标题】：Tailwind error during build with vue project使用 vue 项目构建期间出现 Tailwind 错误
【发布时间】：2021-10-28 00:19:45
【问题描述】：

我的 Vue2 Tailwind CSS 项目在开发中运行良好。但是对于生产我仍然有一个问题：

cross-env NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build

(node:19240) UnhandledPromiseRejectionWarning: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

我尝试使用许多 stackoverflow 帖子中提到的 PostCSS8 和 Compat 7 版本，但这绝对没有任何作用。

有什么方法可以让它在 Vue 2 下工作？

这是我的 package.json：

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build:local": "SET NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build",
    "build": "cross-env NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "bootstrap": "^5.0.1",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "tldts": "^5.7.38",
    "vue": "^2.6.14",
    "vue-cookies": "^1.7.4",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss7-compat": "^2.2.7",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "autoprefixer": "^9.8.6",
    "babel-eslint": "^10.1.0",
    "cross-env": "^7.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "postcss": "^7.0.36",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.8",
    "vue-template-compiler": "^2.6.11"
  }
}

【问题讨论】：

尝试所有这 4 个“解决方案”不起作用：exerror.com/error-postcss-plugin-tailwindcss-requires-postcss-8

标签： vue.js tailwind-css postcss

【解决方案1】：

我也有同样的问题。如果您在 2.1.4 安装 tailwind compat 版本，它将工作，但我需要稍后添加一些修复和功能。为了让您尝试此修复，请更改您的 package.json

- "@tailwindcss/postcss7-compat": "^2.2.7"
+ "@tailwindcss/postcss7-compat": "2.1.4",

如果有人可以让它在 2.1.4 以上工作，请在此处回复。

【讨论】：