Text-decoration-thickness与text-decoration-color在iOS Safari中异常问题求助

1. Tailwind工具类的兼容写法缺失 #

Safari 15虽标注支持text-decoration-thickness和text-decoration-color，但实际渲染需要补全webkit前缀。你可以自定义Tailwind工具类来兼容：

@layer utilities {
  .custom-underline {
    text-decoration-line: underline;
    text-decoration-color: yellow;
    text-decoration-thickness: 2px;
    -webkit-text-decoration-color: yellow;
    -webkit-text-decoration-thickness: 2px;
    /* 顺便修正Safari下划线偏移问题 */
    text-underline-offset: 2px;
    -webkit-text-underline-offset: 2px;
  }
}

之后在HTML中用这个custom-underline代替原本的Tailwind工具类组合即可。

2. 尝试使用text-decoration简写属性 #

Safari 15对分散设置的text-decoration属性支持不稳定，试试合并成简写形式：
直接用内联样式测试：

<span class="underline" style="text-decoration: underline yellow 2px;">需要下划线的文本</span>

或者在Tailwind配置里添加自定义样式：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      textDecoration: {
        'yellow-thick': 'underline yellow 2px',
      },
    },
  },
}

配置完成后使用text-decoration-yellow-thick类即可。

3. 排查样式冲突问题 #

检查父元素是否设置了text-decoration相关样式覆盖当前元素，比如父元素的text-decoration-color继承给了子元素。可以临时添加!important验证是否为优先级问题：

.custom-underline {
  text-decoration-color: yellow !important;
  text-decoration-thickness: 2px !important;
}

确认问题后再调整选择器优先级，避免滥用!important。

4. 用box-shadow模拟下划线（终极兼容方案） #

如果以上方法都无效，直接用盒子阴影模拟下划线，彻底避开Safari的属性兼容问题：

@layer utilities {
  .shadow-underline {
    box-shadow: inset 0 -2px 0 0 yellow;
    padding-bottom: 1px;
  }
}

这个方法在所有浏览器中表现一致，无兼容性顾虑。

内容的提问来源于stack exchange，提问作者Kyle