Vue3中遇到问题：PostCSS plugin tailwindcss requires PostCSS 8 解决方案

阿正的梦工坊

已于 2022-02-16 17:03:29 修改

阅读量3.6k

点赞数

分类专栏： Front End 文章标签： postcss vue.js 前端

于 2022-02-16 17:00:48 首次发布

本文链接：https://blog.csdn.net/shizheng_Li/article/details/122967415

版权

Front End 专栏收录该内容

8 篇文章

订阅专栏

本文档记录了在Vue项目中遇到TailwindCSS报错`PostCSS plugin tailwindcss requires PostCSS 8.`的解决步骤。通过卸载autoprefixer、postcss和tailwindcss，然后使用vue-cli-plugin-tailwind插件重新安装并选择最小选项，成功解决了问题。在完成这些操作后，重新运行`npm run serve`，项目顺利启动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到问题

在这里插入图片描述

 ERROR  Failed to compile with 1 error                                                                                                                                             4:45:27 PM

 error  in ./src/assets/tailwind.css

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

解决方法

$  npm uninstall autoprefixer postcss tailwindcss
$ vue add tailwind  - selecting minimal option

具体过程如下

azheng@lishizheng:/mnt/e/shizheng_coding/vue3_express/vue_express_tailwind_map_web/client$  npm uninstall autoprefixer postcss tailwindcss

removed 45 packages, and audited 1480 packages in 12s

3 packages are looking for funding
  run `npm fund` for details

72 vulnerabilities (61 moderate, 11 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
azheng@lishizheng:/mnt/e/shizheng_coding/vue3_express/vue_express_tailwind_map_web/client$ vue add tailwind  - selecting minimal option
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing vue-cli-plugin-tailwind...


added 1 package in 3s

3 packages are looking for funding
  run `npm fund` for details
✔  Successfully installed plugin: vue-cli-plugin-tailwind

? Generate tailwind.config.js minimal
? tailwind.config.js already exists! Do you want to replace it? Yes

🚀  Invoking generator for vue-cli-plugin-tailwind...
📦  Installing additional dependencies...


added 97 packages, removed 126 packages, and changed 1 package in 12s
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-tailwind