Tailwind用decoration-前缀类拆分text-decorationunderline/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-400decoration-{size}粗细decoration-1≈1pxdecoration-4≈4pxdecoration-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和overlinedecoration-wavy在Firefox和Chrome渲染差异大吗大。Firefox从v91开始原生支持text-decoration-style: wavy渲染平滑Chrome直到v115才完全对齐早期版本会退化为锯齿状虚线且decoration-offset在Chrome中对波浪线垂直定位不准——偏移量实际生效值比写的少约0.5px。 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能