underline类未生效主因是text-decoration被高优先级样式覆盖，如no-underline、a标签全局重置或prefers-reduced-motion规则；颜色可用underline-{color}，粗细和位置需手动扩展css；响应式需检查断点匹配与规则冲突；下划线位置受字体影响，建议统一字体栈并谨慎使用text-underline-offset。
为什么 underline 类没生效？常见样式冲突点
直接加 underline 却看不到下划线，大概率是其他 CSS 覆盖了 text-decoration。Tailwind 的 underline 实际生成的是 text-decoration: underline;，而很多组件库、重置样式（比如 normalize.css）或自定义 a 标签样式会设 text-decoration: none;，且优先级更高。
排查时优先检查：
– 父元素是否用了 no-underline（Tailwind 自带类）
– 是否在 a 标签上用，但全局有 a { text-decoration: none; }
– 是否启用了 prefers-reduced-motion 相关的插件或自定义规则，意外禁用了装饰
下划线颜色和粗细怎么调？underline- 前缀的限制
Tailwind 本身不提供 underline-thickness 或 underline-offset 的原子类（v3.4 之前），只支持通过 underline-{color} 控制颜色，例如 underline-blue-500、underline-current。颜色必须是已配置的调色板色值，不能写 underline-#3b82f6。
若需调整下划线位置或粗细，得手动补 CSS：
– 用 decoration-slice 不适用，别试
– 正确做法：加 class="underline" 后，在 @layer utilities 里扩展：
.underline-custom { text-decoration-thickness: 2px; text-decoration-offset: 4px; }
– 或直接内联：
style="text-decoration-thickness: 2px; text-decoration-offset: 4px;"
响应式下划线怎么开/关？sm:underline 为什么有时失效
响应式前缀如 sm:underline 生效的前提是：该断点已被启用，且未被更高优先级规则覆盖。常见失效原因：
– sm: 类在 md 及以上屏幕才激活，但你测试时在小屏
– 在同一元素上同时写了 underline 和 md:no-underline，而 md 断点匹配时后者生效
– 使用了 group-hover:underline 但父容器没加 group 类
建议写法：
– 开关组合更可靠：underline md:no-underline hover:underline
– 避免嵌套过深的伪类链，比如 group-hover:md:underline 是非法的，Tailwind 不解析这种混合
下划线和文字对齐异常？underline 对 line-height 和字体的影响
原生 text-decoration: underline 的位置由字体的 underline-position 和 underline-thickness 决定，不同字体差异很大。比如 system-ui 和 Inter 的下划线离基线距离不同，可能导致多行文本中下划线“上下浮动”。
解决思路：
– 统一字体栈，避免混用 Web Font 和系统字体
– 强制重置基线行为：class="underline" + style="text-underline-offset: 3px;"（注意：Safari 15.4+ 才完全支持 text-underline-offset）
– 不要依赖 leading- 类去“微调”，它影响的是行高，不是下划线偏移
真正容易被忽略的是：当文字缩放（zoom）、或用户开启“增大文字”辅助功能时，text-underline-offset 的像素值可能失准——这时候语义化处理比像素精调更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
