分类: 前端开发

  • Tailwind v4迁移踩坑:SVG样式控制变色的正确姿势

    一个 SVG 裙摆按钮在 Tailwind v4 下全面失灵的故事,以及如何用 CSS 变量 fallback 模式一劳永逸地解决。


    问题:SVG 描边突然消失了

    最近在做一个仿浏览器标签页的「裙摆按钮」组件(SkirtTabs),用 SVG path 画出标签页的圆角轮廓和底部裙摆效果。在 Tailwind v4 迁移后,活跃标签的 SVG 描边完全消失了。

    代码看起来没问题:

    var(--border) 解析为空值——因为 Tailwind v4 的 @theme 系统把变量名从 --border 改成了 --color-border

    (更多…)