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

2025-12-12

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

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

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

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

多云 一般
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君