应将字号映射到语义层级并绑定CSS自定义属性，如.text-sm对应--font-size-sm，同时font-size与line-height按层级联动设置，避免px硬编码和行高失衡。
font-size 工具类怎么写才不和设计系统冲突
直接用 font-size: 14px 写死在工具类里，很快就会被设计师一句“全局改成 15px”打回原形。真正可持续的做法是把字号映射到语义层级，比如 text-sm 对应小号辅助文字，text-base 对应正文，默认值绑定 CSS 自定义属性。
推荐结构：
:root {
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
}
<p>.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }这样改字号只需动 :root，所有工具类自动响应。别用 px 值硬编码，否则响应式断点里没法用 clamp() 或缩放。
line-height 工具类必须和 font-size 联动设置
单独设 line-height: 1.5 看似省事，但遇到 font-size: 12px 和 font-size: 24px 时，视觉行距会严重失衡——小字显得太松，大字又挤在一起。
立即学习“前端免费学习笔记（深入）”；
正确做法是按字号层级配对定义：
.text-xs { font-size: var(--font-size-xs); line-height: 1.33; }
.text-sm { font-size: var(--font-size-sm); line-height: 1.43; }
.text-base { font-size: var(--font-size-base); line-height: 1.5; }
.text-lg { font-size: var(--font-size-lg); line-height: 1.44; }注意：line-height 值不是固定小数。字号越大，人眼感知的垂直空间越紧张，所以 text-lg 的行高反而略低于 text-base（1.44
- 避免用无单位数值以外的
line-height，比如line-height: 20px会导致子元素继承后错乱 - 不要给工具类加
!important，否则和组件内联样式打架时根本没法调试 - 如果项目用 Tailwind，确认
theme.fontSize和theme.lineHeight是同步配置的，否则text-xl可能配错行高
如何让工具类在响应式中自然过渡
移动端正文用 text-base，桌面端想升一级到 text-lg，但又不想多写一层 class？靠媒体查询组合即可：
.text-base { font-size: var(--font-size-base); line-height: 1.5; }
@media (min-width: 768px) {
.text-base { font-size: var(--font-size-lg); line-height: 1.44; }
}关键点：
- 响应式调整优先改
font-size，line-height必须同步重设，不能只调字号 - 别用
em或rem做响应式字体，它们依赖根字号，容易被第三方 UI 库污染 - 如果用了
clamp(1rem, 4vw, 1.25rem)，就别再套工具类，二者逻辑冲突
为什么 text-2xl 这类工具类容易导致行高塌陷
很多框架的 text-2xl 只设了 font-size: 1.5rem，没配 line-height，结果文字紧贴上一行或下一行，尤其在 display: inline-block 容器里特别明显。
查问题时先看 computed styles：如果 line-height 显示为 normal 或继承自父级（比如 1.2），那就必然出问题。解决方式只有两个：
- 补全工具类，确保每个
text-类都带显式line-height - 或者统一用
line-height: 1.5作为 body 默认值，再让工具类覆盖它（但这样灵活性低）
最常被忽略的是按钮、标签等短文本组件——它们用 text-sm 时，若行高没收紧，上下留白会比文字本身还大，视觉上像被撑开了一样。
