Tailwind Preflight 把 SVG 变成块级盒，非 flex 按钮里的图标换行了

Hero 区一个渐变 CTA 按钮，内容是"免费开始 →"，却在真机上变成了两行：第一行"免费开始"，第二行孤零零地挂着一个箭头图标。第一反应是文字太长，加了 whitespace-nowrap 之后——毫无效果，箭头依然住在第二行。

现象

• 自定义的炫光按钮（ShimmerButton / 渐变 CTA 类组件）里：文字 + 尾随 SVG 图标，图标换到下一行，视觉上像组件写断了。
• 换成 shadcn 的标准 <Button> 同样的 children，一行显示，没有问题。
• whitespace-nowrap 加在按钮或内层 <span> 上，完全没用。

两个组件的区别让人直觉认为是"自定义组件哪里漏掉了某个 CSS 属性"，但其实根因比这更底层。

根因

Tailwind Preflight（默认开启的全局 CSS 重置）里有这样一条规则：

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

这意味着任何 <svg>——包括 Lucide、Heroicons 等图标库渲染出来的 SVG——都会被重置为 块级盒（block box）。

块级盒的特性是独占一行，无法与前面的文字文本节点共处同一行流。whitespace-nowrap 只管文本节点内部的换行，对块级盒的行为毫无约束力，所以加了也白加。

而标准 <Button> 之所以没问题，是因为它的根元素基础类里就有 inline-flex items-center——在 flex 布局下，子节点不论是 inline 还是 block，都会被当作 flex item 排在同一主轴方向，图标自然和文字并排。

正解

在承载 {children}（即文字 + 图标混排内容）的容器上加 inline-flex items-center，让图标作为 flex item 和文字并排：

// 修复前：icon 掉到下一行
<span className="relative z-10">{children}</span>
 
// 修复后：icon 和文字同行、垂直居中
<span className="relative z-10 inline-flex items-center justify-center whitespace-nowrap">
  {children}
</span>

关键点是在组件内部修，不是在每个调用处加 flex 包裹。图标换行是组件的 CSS 结构问题，让每个消费方自己包一层 flex 是把锅甩给调用方，下一个人还会踩同一个坑。

图标与文字的间距也建议统一用 flex 容器的 gap-2，而不是图标上的 ml-2 / mr-2——对称性更好，leading / trailing icon 换位时不需要修改。

排查线索

如果你不确定是不是 Preflight 在作怪，可以在浏览器控制台验证：

getComputedStyle(document.querySelector('button svg')).display
// → "block"  说明 Preflight 命中了；父容器改成 flex 后图标就不会独占一行

一句话外卖

Tailwind Preflight 把所有 SVG 变成 block box；在非 flex 容器里图标必然换行，whitespace-nowrap 救不了你——给那层容器加 inline-flex items-center 才是正解。