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

Posted

技术标签:

【中文标题】使用 vue 项目构建期间出现 Tailwind 错误【英文标题】:Tailwind error during build with vue project 【发布时间】: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

我尝试使用许多 *** 帖子中提到的 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 【参考方案1】:

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

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

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

【讨论】:

以上是关于使用 vue 项目构建期间出现 Tailwind 错误的主要内容,如果未能解决你的问题,请参考以下文章

将 Tailwind.css 添加到 Vue.js 项目后,某些类没有效果

如何使用 Tailwind 和 Vue.js 动态显示移动菜单?

Vue/Tailwind 中的浮动标签

Vue.js 项目在“npm build”期间出现 404 错误并在 Apache Tomcat 中提供服务

NuxtJS 和 Tailwind 用户界面

Vue CLI + Tailwind:使用 CSS 变量进行主题化