Syntax Error: Error: PostCSS plugin tailwindcss/autoprefixer requires PostCSS 8.

最新推荐文章于 2024-10-30 09:56:33 发布
原创 最新推荐文章于 2024-10-30 09:56:33 发布 · 1.9k 阅读 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
cknow-ai snowDreamzzz

cknow-ai 关注

标签
#postcss #vue.js #npm
分类 开发工具
在Vue项目中使用tailwindcss和autoprefixer时遇到PostCSS版本不兼容的错误，可以通过删除并重新安装特定版本的npm包来解决。首先卸载tailwindcss,postcss和autoprefixer，然后安装带‘postcss7-compat’后缀的tailwindcss和对应的postcss及autoprefixer版本。

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.

problem

vue中引入tailwindcss 启动时，命令行报错 2 种错误

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


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

reason

npm包版本不兼容

solution

先删除已安装的npm包 yarn npm 按需选择

  • yarn remove tailwindcss postcss autoprefixer
  • npm uninstall tailwindcss postcss autoprefixer

再重新安装 yarn npm 按需选择

  • yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  • npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
点赞 点赞 1
评论 0
书签 书签 5
uniapp - 报错Error: PostCSS plugin autoprefixer requires PostCSS 8. Migration guide for end-users:http
✅ 精选推荐文章
07-24 4078
uniapp，vue2，vue3，报错，运行报错，启动失败，无法启动，Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8. Migration guide for end-users:https://github.com/postcss，vue，命令行创建，cli，更新PostCSS或降级此插件，将autoprefixer的版本更改还是报错，版本升级了还是报错，版本降了依旧有错误，PostCSS，uniApp启动报错，如何解
uniapp - 解决报错Syntax Error: PostCSS plugin autoprefixer requires PostCSS 8. Migration guide for end-u
✅ 精选推荐文章
07-10 2704
uni-app，报错，解决问题，无法启动，启动报错，运行出错，执行报错，Error: PostCSS plugin autoprefixer requires PostCSS 8. Migration guide for end-users: https://github，详细解决教程，PostCSS插件autoprefixer需要PostCSS 8。最终用户迁移指南，如何解决这个问题，升级版本依旧不行，autoprefixer，降低autoprefixer版本还是报错，uniApp报错，uni-app启动
Pycharm安装第三方库以及出错原因（Mac版）
weixin_46019681的博客
06-07 7834
为什么你的mac的PyCharm import numpy出错呀？为什么用不了numpy、pandas、matplotlib、scipy呀？为什么安装不了它们啊。
chrome控制台无法粘贴,报Warning: Don’t paste code into the DevTools Console that you don’t underst
热门推荐
kfepiza的博客
02-16 4万+
XSS（Cross Site Script）即跨站脚本Self-XSS 即自我跨站脚本Self-XSS（自我跨站脚本攻击）是一种特殊的跨站脚本攻击（XSS），其中攻击者利用网站或应用程序的漏洞，将恶意脚本注入到目标用户的浏览器会话中，但这种攻击仅对发起攻击的用户本身有效。换句话说，这是用户自己提交恶意有效负载（payload），并在自己的浏览器会话中触发XSS攻击。在Self-XSS攻击中，受害者与攻击者是同一人。这通常发生在用户尝试测试网站或应用程序的安全性，或者误操作导致恶意脚本注入的情况下。
Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yo
qq_38909255的博客
04-11 1万+
Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal 警告：请勿将不理解或未自行查看的代码粘贴到 DevTools 控制台中。这可能允许攻击者窃取您的身份或控制您的计算机。请在下面输入“允许粘贴”以允许粘贴。我们拷贝的数据，放入谷歌浏览器控制台的时候报警告，且数据等不能使用。
Vue3中遇到问题：PostCSS plugin tailwindcss requires PostCSS 8 解决方案
阿正的梦工坊
02-16 3983
踩坑
Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
qq_45288220的博客
03-05 1327
vue中引入tailwindcss 启动时 报此种错误我的 node 版本 是 v16.15.0我vue2 使用的是yarn。
Day 117/200 PostCSS plugin tailwindcss requires PostCSS 8
xinghuowuzhao的博客
04-06 1008
1、启动项目报错 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 2、安装包版本问题 卸载现有版本 npm uninstall tailwindcss postcss autoprefixer 安装正确版本
Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed 解决
学习笔记
12-11 1万+
新 chrome 出了这么一个东西，表示不让你在 console 中粘贴一些你不懂的东西，完完全全是针对普通用户的。
Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed
最新发布
Hassan的小博客!
10-30 6983
大概意思就是：不要将你不理解或没有自己检查过的代码粘贴到DevTools控制台。这可能允许攻击者窃取您的身份或控制您的计算机。请在下面输入“allow pasting”，然后按回车键允许粘贴。控制台输入 allow pasting， 回车就好了。最近浏览器控制台突然不能粘贴代码了，报了个警告。
解决 Chrome 120 开发人员工具 无法粘贴代码
Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
12-26 4万+
新增 Self-XSS 保护警告，无法顺利无法在开发人员工具（DevTools） console 贴上 代码 ，正常应该要跳出 提示窗口，但目前windows有碰到状况是没有跳出来，完全无法点击 Allow 允许粘贴代码。
Error PostCSS plugin autoprefixer requires PostCSS 8
小马甲
11-26 4192
总觉得有些时候`npm`，`cnpm`，`yarn`各种混用，还有些时候`node`版本不断切换，也是非常影响稳定性。遇到问题也都是直接把错误贴出去找解决方法，`npm`也是锁了，所以还是有点烦这种。
Error: PostCSS plugin autoprefixer requires PostCSS 8问题解决办法
高性价比服务器就选：蓝易云
02-25 3585
如果你在使用PostCSS插件autoprefixer时遇到了"PostCSS plugin autoprefixer requires PostCSS 8"的错误，这通常是因为你的项目中PostCSS的版本低于autoprefixer所需要的版本。以上步骤应该可以解决"PostCSS plugin autoprefixer requires PostCSS 8"的问题。如果问题仍然存在，你可能需要检查你的项目配置，确保没有其他的冲突或问题。
解决chrome浏览器Console控制台无法粘贴代码
nathan8的博客
06-27 3万+
浏览器调试的时候经常会用到console，粘贴内容进console控制台会报错，严重影响调试效率。3、取消勾选 Show warning about Self-XSS when pasting。2、Settings -> Experiments -> Filter 输入 Paste。1、点击 开发人员工具（DevTools） 右边上方齿轮（设置）；直接在console控制台手动输入：allow pasting。回车即可成功设置允许粘贴。4、重启Chrome。
28个超实用Chrome DevTools 调试技巧参考了前端调试通关秘籍
王森的博客
11-27 4433
谷歌开发者工具提供了一系列的功能来帮助开发者高效 Debug 网页应用，让他们可以更快地查找和修复 bug。在谷歌的开发者工具中，有非常多有用的小工具，但是很多开发者并不知道。通过这篇文章，我把我常用的那些高效 Debug 的 Chrome 开发者工具的功能分享给大家。简洁起见，接下来我会使用开发者工具来指代谷歌开发者工具。在我们开始之前，你需要做一些准备工作。如果你想使用谷歌最新的版本和开发者工具，你可以下载，甚至把它设置为开发默认打开的浏览器。金丝雀版本旨在为早期接受者提供最新的更新。
Error: PostCSS plugin autoprefixer requires PostCSS 8 问题解决办法
~Mysunny的博客
08-29 3164
报错：Error: PostCSS plugin autoprefixer requires PostCSS 8。执行：npm i postcss-loader autoprefixer@8.0.0。原因：autoprefixer版本过高。降低autoprefixer版本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值