记 Shadcn UI 生成组件样式不符的坑

2025-12-12 · 周五一般多云

今天在使用 Shadcn UI 的时候发现有个坑,发现官方文档的组件 Demo 居然和项目本地跑的效果不同。

这件事情的主要起因就是 ToolTip 组件增加了箭头之后会出现闪烁的现象,看着挺不爽的。而打开文档看它的 Demo 是正常的,想着是不是更新一下就能解决,结果无论是更新依赖还是删除掉原来生成的文件,都是之前“老版本”的模样...

我再三排查后发现,问题主要是 Shadcn UI 的 components.json 配置上,指定了 tailwind.config 设置项之后,就会生成出这种“老版本”的代码,对照 文档 后发现,如果使用 Tailwind V4,这里默认是缺省的,按照 Tailwind 4 模式生成的代码就是和文档效果一样的,而公司项目使用的 Tailwind 是 V3 的版本,真相大白。

但我还是使用了最新的 Tailwind V4 才会生成的代码丢进了项目当中,无论是依赖项还是交互行为其实都和之前一样,只是返回的函数组件样式和组件结构有些差异,但好在那个箭头会闪烁的问题解决了,就这样吧!

Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 9 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君