tailwind用decoration-前缀类拆分text-decoration：underline/line-through/overline控位置，decoration-solid/dashed/dotted/wavy控线型，decoration-{color}控颜色，decoration-{size}控粗细，decoration-offset-{size}控偏移；需组合使用且注意顺序，underline本身不触发颜色或粗细。
text-decoration属性在Tailwind里对应哪些类
Tailwind不直接暴露text-decoration的原始值，而是用decoration-前缀拆解控制：线型、颜色、粗细、偏移、样式。它把CSS的复合属性打散成可组合的原子类，好处是避免手写冗余样式，坏处是初看容易漏掉某一层。
常见错误是只加underline却忘了配decoration-blue-500，结果线条还是浏览器默认的黑色；或者用了decoration-wavy但没配decoration-2，波浪线细得几乎看不见。
-
underline/line-through/overline：控制线位置（必须显式声明，无默认） -
decoration-solid/decoration-dashed/decoration-dotted/decoration-wavy：线型（默认solid，但不写就不会生效） -
decoration-{color}：颜色支持所有调色板，如decoration-rose-400 -
decoration-{size}：粗细，decoration-1≈1px，decoration-4≈4px -
decoration-offset-{size}：控制线与文字的垂直距离，decoration-offset-2比默认更远
为什么underline类单独存在却不能和decoration-color一起用
因为underline只是text-decoration-line: underline的快捷方式，它本身不触发text-decoration-color或text-decoration-thickness——这些是独立CSS属性，Tailwind用decoration-系列分别控制。所以光写underline text-red-500不会让下划线变红，必须加decoration-red-500。
另一个坑是顺序：Tailwind按类名顺序生成CSS，如果decoration-red-500写在underline前面，某些旧版浏览器可能忽略。稳妥做法是把underline放最前，再跟decoration-相关类。
- 正确：
underline decoration-green-500 decoration-2 decoration-wavy - 错误：
decoration-green-500 underline（部分Safari 15.4以下版本失效） - 注意：
decoration-offset-对line-through效果不明显，更适合underline和overline
decoration-wavy在Firefox和Chrome渲染差异大吗
大。Firefox从v91开始原生支持text-decoration-style: wavy，渲染平滑；Chrome直到v115才完全对齐，早期版本会退化为锯齿状虚线，且decoration-offset在Chrome中对波浪线垂直定位不准——偏移量实际生效值比写的少约0.5px。
如果你必须用波浪线且要跨浏览器一致，建议加decoration-2兜底，并测试decoration-offset-1到decoration-offset-3的实际效果。别依赖decoration-offset-0.5这种非整数值，Tailwind根本不生成它。
- 兼容性底线：Chrome ≥115、Firefox ≥91、Safari ≥16.4 支持完整wavy
- 替代方案：用
bg-[linear-gradient(...)]模拟波浪背景，但失去语义和可访问性 - 真要保底：用
underline decoration-dashed+decoration-1，至少所有浏览器都认
如何让装饰线只出现在hover状态且不撑开布局
Tailwind的hover:变体能直接作用于decoration-类，比如hover:underline hover:decoration-purple-400。但要注意：默认text-decoration会参与行高计算，hover时突然出现下划线可能导致文字轻微上跳（尤其小字号+紧行高场景）。
根本解法是用decoration-clone（Tailwind v3.3+）或手动覆盖text-underline-offset。不过decoration-clone目前仅支持underline，不适用于line-through。
- 推荐写法：
underline decoration-offset-1 hover:decoration-offset-2，用微调抵消视觉跳动 - 禁用撑开：
decoration-underline decoration-skip-ink-auto（跳过字体降部，减少干扰） - 老版本兼容：
hover:decoration-purple-400 hover:decoration-2+ CSS里补text-underline-offset: 2px
装饰线看似简单，但decoration-offset和text-underline-offset的浏览器实现差异、wavy的渲染断层、以及skip-ink在不同字体下的表现，都是上线前必须实机测的点。别信文档里的“支持”，打开DevTools调一次text-decoration属性看真实渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
