默认 fontSmoothing 只生成响应式变体，需在 variants.extend（v3.4+ 移至 plugins）中配置为 fontSmoothing: ['hover', 'focus'] 并重新构建；subpixel-antialiased 更安全，尤其 macOS 中文环境；误用 antialiased 反致模糊，主因是字体加载、缩放或字重不匹配；建议全局禁用 fontSmoothing 以提升中文体验。
tailwind.config.js 里怎么配 fontSmoothing 变体
默认只生成响应式变体（如 md:antialiased），想加 hover 或 focus 这类交互态，必须手动在 tailwind.config.js 中扩展：
- 打开配置文件，在
variants.extend下添加fontSmoothing数组 - 写法是：
fontSmoothing: ['hover', 'focus']，不是字符串而是数组 - 改完需重新运行构建命令（
npm run build或对应命令），否则新类名不生成 - 注意：Tailwind v3.4+ 已将
variants移至plugins配置下，旧版写法可能失效
antialiased 和 subpixel-antialiased 到底该用哪个
绝大多数场景下，subpixel-antialiased 才是安全选择，尤其 macOS + 中文环境：
-
antialiased强制关闭子像素抗锯齿，会让中文字体边缘发灰、笔画毛糙——这不是“修复模糊”，而是主动降质 -
subpixel-antialiased实际等价于不干预系统，默认启用 RGB 子像素渲染，在 Retina 屏和 100% 缩放下最清晰 - iOS Safari 完全忽略
-webkit-font-smoothing，加了antialiased等于白写 - Windows/Linux 不支持该属性，两类都无实际影响
为什么加了 antialiased 反而更糊
这不是 Tailwind 的 bug，而是对渲染机制的误用：
- 字体模糊几乎从不来自“没开平滑”，而是字体加载时机、缩放比例或字重匹配问题
-
font-display: swap导致首屏用系统字体回退，自定义字体加载后重绘，视觉上像“先清后糊” - 浏览器缩放非 100%（比如 macOS 系统设为“更大文本”）会触发非整像素渲染，直接导致模糊
-
font-weight: 500却只加载了 400/700 字重的字体文件，浏览器被迫合成加粗，边缘糊化
要不要全局禁用 fontSmoothing 功能
如果你项目里没人手动加 antialiased 或 subpixel-antialiased，建议直接关掉：
立即学习“前端免费学习笔记（深入）”；
- 在
tailwind.config.js的corePlugins中设fontSmoothing: false - 能减少 CSS 体积，避免团队成员误用
antialiased拖累中文阅读体验 - 系统默认渲染逻辑已足够好，强行干预反而容易出问题
- 真有特殊需求（比如深色模式下黑底白字需统一灰阶抗锯齿），再局部加 class 更可控
antialiased，检查 font-display 和 font-weight 匹配，比调任何 -webkit-font-smoothing 都管用。 
