tailwind不提供text-stroke类，因其依赖的-webkit-text-stroke在firefox中完全无效且非css标准，违背tailwind“只封装稳定跨浏览器原语”的设计哲学；它优先支持全浏览器兼容的text-shadow方案。
为什么Tailwind不提供text-stroke类
Tailwind默认不包含任何text-stroke相关原子类，因为它依赖-webkit-text-stroke，而该属性在Firefox中完全无效，且不属于CSS正式标准。Tailwind的设计哲学是“只封装稳定、跨浏览器的原语”，所以它选择不内置这个高风险属性——哪怕Chrome/Safari看着很爽，只要Firefox一刷就丢效果，它就不收。
用text-shadow模拟描边的最小可行配置
想在Tailwind里快速加描边，最稳的方式是手写text-shadow并用@layer utilities封装成自定义类。别指望靠一堆shadow-类拼出来——那些是为box-shadow设计的，对文字无效。
- 8方向阴影是底线：上下左右 + 四个对角，缺一个就会漏边
- 所有偏移值必须一致（如
1px），模糊值必须为0，否则边缘发虚 - 颜色建议用
rgba(0,0,0,0.8)而非纯黑，避免Retina屏下过重 - 示例（放入
tailwind.config.js的theme.extend或@layer utilities）：
.text-stroke-1 {
text-shadow: 1px 1px 0 currentColor, -1px -1px 0 currentColor,
1px -1px 0 currentColor, -1px 1px 0 currentColor,
1px 0 0 currentColor, -1px 0 0 currentColor,
0 1px 0 currentColor, 0 -1px 0 currentColor;
}
响应式描边宽度怎么处理
硬写1px在缩放或高DPR设备上会失效：2x屏上1px物理像素几乎看不见，3x屏更甚。不能靠scale或transform补，那会拉伸文字本身。
- 用
em单位替代px：比如0.06em≈ 字号的6%，随font-size自动缩放 - 避免
%——CSS规范不支持text-shadow偏移值用百分比 - 如果项目用了
rem做根字号控制，也可用0.06rem，但需确认:root没被动态改 - 别试图用
clamp()套在text-shadow里——它不接受函数作为偏移值
和Tailwind原生文字装饰类混用的坑
别把underline和你手写的描边类一起用，尤其当文字有color: transparent时——text-shadow会彻底消失，因为它是基于文字内容渲染的，不是盒模型层。
-
decoration-系列类只影响text-decoration线，和描边无关，二者互不干扰 - 但如果你同时用了
font-smooth: antialiased或-webkit-font-smoothing，某些Safari版本会削弱描边锐度 - 真要叠加下划线+描边？先确保描边类在
underline之后声明，否则旧Safari可能跳过描边 - 测试重点：Firefox（必须能见）、Safari 16.6+（检查是否糊）、Chrome 124+（验证DPR适配）
描边最难的从来不是怎么写，而是每次改完都得开三台设备看——一台Windows Chrome，一台Mac Safari，一台Linux Firefox。少一个，就可能上线后发现标题在某处彻底隐形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
