tracking-tight加了没反应，因其仅在font-sans、font-bold及以上字重、字号≥text-4xl时生效；小字号、font-serif或缺失font-sans会导致静默失效，且不可与uppercase混用。
tracking-tight 为什么加了没反应？
因为 tracking-tight 不是“让文字变高级”的万能开关，它只在特定条件下生效：必须搭配 font-sans（系统无衬线字体栈）、font-bold 或更粗的字重，且字号建议 ≥ text-4xl。小字号（如 text-sm）或用了 font-serif，它会静默失效——浏览器渲染出的 letter-spacing: -0.025em 在小尺寸下几乎不可见，甚至被字体引擎忽略。
常见错误现象：<h2 class="tracking-tight">Hello</h2> 看不出变化；检查 computed styles 会发现 letter-spacing 值存在但未生效，根源往往是缺失 font-sans 或字体 fallback 不匹配。
- 确保类名中包含
font-sans（哪怕你没自定义字体，它也触发系统默认无衬线体） - 避免和
uppercase同时使用：全大写本身已有视觉收紧效果，叠加后易导致字母粘连 - 不要用于正文段落：
tracking-tight是为短标题设计的微调，用在长文本里会破坏阅读节奏
如何设置任意字间距值（比如 letter-spacing: 0.08em）？
Tailwind 默认只提供 tracking-tight、tracking-normal、tracking-wide 三档预设。要精确控制，得用任意值语法 tracking-[value]，但要注意版本与配置限制：
- v3.3+ 支持直接写
tracking-[0.08em]，无需额外配置 - 旧版本需在
tailwind.config.js的theme.extend.letterSpacing中注册：{ '0_08': '0.08em' }，然后用tracking-0_08 - 值必须是静态字符串，不能是
calc()、CSS 变量或 JS 表达式 - 单位推荐用
em或rem，避免像素值（如2px）在缩放或响应式场景下失准
示例：<span class="font-sans text-xl tracking-[0.08em]">Product Name</span> —— 这比硬写内联 style="letter-spacing: 0.08em" 更利于复用和维护。
letter-spacing 和 word-spacing 有什么区别？中文该用哪个？
letter-spacing 控制字符间距离，word-spacing 控制单词间距离。对中文而言，word-spacing 基本无效——中文没有空格分隔的“单词”，浏览器不会按语义拉伸词距；强行设置可能只影响标点或中英文混排中的空格位置，行为不可控。
所以中文排版只应依赖 letter-spacing（即 Tailwind 的 tracking- 类），但要注意：
- 负值（如
tracking-tighter）慎用：中文字形饱满，过度收紧易造成笔画碰撞，尤其在小字号或低分辨率屏上 - 正值（如
tracking-wider）可用于强调型短标语，但超过0.1em就容易削弱识别度 - 避免全局设置
letter-spacing：不同字体对字距敏感度差异大（如思源黑体 vs 苹果 SF Pro），统一值会导致部分字体发虚或发闷
为什么 Safari 看着正常，Chrome 却显得字距不均？
这是由浏览器对极小 letter-spacing 值（尤其是负值）的像素对齐策略不同导致的。Safari 使用 sub-pixel 渲染更激进，能平滑处理 -0.025em 这类微调；Chrome/Firefox 则倾向于四舍五入到整像素，造成部分字符间距“跳变”或视觉抖动。
解决办法不是换浏览器，而是：
- 实机检查：在目标设备（特别是 iOS / Android WebView）上验证，别只信桌面 Chrome DevTools
- 避免依赖亚像素精度：把
tracking-[0.025em]改成tracking-[0.03em]或tracking-[0.05em]，提升跨引擎稳定性 - 优先用设计系统约定值：比如苹果官网实际用的是
-0.025em，但如果你没用 SF Pro 字体栈，这个值就只是参考，应以真实渲染为准
最常被忽略的一点：字距效果高度绑定字体栈和渲染上下文，脱离这两者谈“精确控制”都是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
