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

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

问题：SVG 描边突然消失了

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

代码看起来没问题：

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

Tailwind v4 的变量命名变化

Tailwind v3 及之前的 CSS 变量命名：

:root {
  --border: #27272a;
}

Tailwind v4 的 @theme 系统：

@theme {
  --color-border: #44475a;
}

所有颜色变量都加了 --color- 前缀。如果你的组件引用 var(--border)，在 v4 下会解析为空值。

解决方案：CSS 变量 Fallback 模式

style={{ stroke: isActive ? 'var(--color-border, var(--border))' : 'transparent' }}

这个模式的工作原理：

1. 先找 --color-border（Tailwind v4 的命名）
2. 找不到再 fallback 到 --border（传统 CSS 命名）
3. 两个都没有时，还可以加第三层 fallback：var(--color-border, var(--border, #27272a))

这样组件在任何主题系统下都能正确渲染。

同样的问题：硬编码颜色

组件的默认参数用了硬编码 hex：

underlineColor = '#27272a',  // 不跟主题走
dividerColor = '#333',       // 不跟主题走

修复方法一样：

underlineColor = 'var(--color-border, var(--border, #27272a))',
dividerColor = 'var(--color-border, var(--border, #333))',

保留 hex 作为最终 fallback，确保在没有定义 CSS 变量的环境也能工作。

SVG viewBox 裁切问题

还有一个细节：SVG 的 stroke 在路径线两侧各延伸 strokeWidth/2。当路径在 y=0 处，viewBox 也从 y=0 开始时，上方的 0.5px 描边被裁切了。

修复前：viewBox="... 0 ..."    → 顶部描边被裁掉0.5px
修复后：viewBox="... -1 ..."   → 留出描边完整渲染空间

内联 style vs JSX 属性

SVG 标签上有 stroke 属性时，style={{ stroke }} 不会生效——JSX 属性优先级更高。

// ❌ 不生效：标签上的 stroke 属性覆盖了 style


// ✅ 生效：删掉属性，只用 style

总结

|——|——|———-|

核心原则：组件库的样式应该用 CSS 变量 + 多层 fallback，而不是依赖特定的变量命名或硬编码值。这样组件在不同主题系统、不同版本的 CSS 框架下都能正确渲染。