underline-offset-2 不生效是因为未同时启用 underline 或 decoration-underline；下划线必须显式开启，偏移类才起作用，且需避免 no-underline 或父级 text-decoration: none 的覆盖。
underline-offset 和 decoration- 是 Tailwind v3.4+ 中控制下划线偏移与颜色的核心方式，但必须注意：它们不是独立类名，而是组合在 decoration-[value] 和 underline-offset-[value] 语法中，且需确保启用 text-decoration 相关插件（默认已启用）。
为什么 underline-offset-2 不生效？
常见错误是直接写 underline-offset-2 却没配 underline 或 decoration-underline —— Tailwind 的偏移类不自动开启下划线，它只控制已有下划线的位置。下划线本身必须显式启用：
-
underline（等价于decoration-underline）是前提，否则underline-offset-完全无作用 - 若用了
no-underline或父级设置了text-decoration: none，偏移类也会被压制 -
underline-offset-1到underline-offset-8对应像素值（如1px～8px），但部分浏览器（尤其是 Safari）对非整数或负值支持不稳定 - 字体差异会影响视觉偏移感，比如
font-sans和font-serif下同一underline-offset-2看起来位置不同
如何用 decoration- 控制下划线颜色？
旧版 underline-{color}（如 underline-blue-500）仍可用，但推荐迁移到更统一的 decoration- 语法，因为它能和偏移、粗细等未来扩展保持一致：
-
decoration-blue-500设置颜色，必须搭配decoration-underline或underline - 颜色值必须来自 Tailwind 调色板，
decoration-#3b82f6会失效（自定义色需在theme.extend.colors中注册） -
decoration-current可继承文字颜色，适合主题切换场景 - 若同时设
decoration-underline和decoration-blue-500，顺序无关，Tailwind 会合并为text-decoration: underline; text-decoration-color: #3b82f6
下划线粗细和位置需要手动扩展吗？
v3.4+ 已原生支持 decoration-[thickness]（如 decoration-2），但注意：
-
decoration-2表示text-decoration-thickness: 2px，不是边框粗细，不兼容 IE 和部分旧 Safari -
underline-offset-和decoration-类必须同时出现在同一元素上才生效，不能拆到父子级 - 想让下划线离文字更远，别只加
underline-offset-4，还要检查line-height是否挤压了视觉空间 - 如需精细控制（比如
text-underline-offset: 0.2em），仍得进@layer utilities手写 CSS，Tailwind 不提供em/rem偏移类
最易被忽略的一点：所有 decoration- 相关样式都依赖 text-decoration-line 的存在，而这个属性会被任何带 text-decoration 的全局重置（如 a { text-decoration: none }）直接覆盖——所以排查时第一眼该看 computed styles 里 text-decoration-line 是否为 underline，而不是反复调 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
