必须将 fluid 字体声明放在 theme.extend.fontFamily 下并用数组包装，否则 Tailwind 会静默忽略；同时需在 extend.fontSize 中为 fluid 字号配对应行高，且避免混用断点类覆盖流体效果。
流式排版（fluid typography）在 Tailwind 中不能靠堆 sm:text-base md:text-lg 实现，那只是阶梯切换；真正平滑缩放必须用 clamp()，且配置位置、写法、使用方式稍有偏差就会完全失效。
为什么直接往 theme.fontFamily 里加 fluid 没反应
Tailwind 会静默忽略你写在 theme.fontFamily 顶层的自定义字体声明——它只认 theme.extend.fontFamily 下的扩展项。写错位置等于没写。
- ❌ 错误：把
fluid放在theme.fontFamily下，整个字体系统会退化，连默认的font-sans都可能不生成 - ✅ 正确：必须塞进
theme.extend.fontFamily，例如：extend: { fontFamily: { fluid: ['clamp(1rem, 4vw + 0.8rem, 2rem)'] } } - 别漏掉数组包装：
['...']是必需语法，单字符串会被跳过
text-fluid 类生效但行高错乱？检查 lineHeight 是否显式绑定
Tailwind 的 fontSize 工具类默认带行高联动，但 clamp() 值不会自动推导行高。小屏下文字会挤成一团，不是字号问题，是行高没适配。
- ✅ 正确写法是在
extend.fontSize中传数组：'fluid': ['clamp(1rem, 4vw + 0.8rem, 2rem)', { lineHeight: '1.4' }] - ❌ 不要试图对
lineHeight也用clamp()：Tailwind 不支持，会直接丢弃该值 - 若标题和正文需不同行高，拆成两个键：
fluid-heading和fluid-body，分别配不同lineHeight
混用 sm:text-xl 和 text-fluid 导致流体失效？这是覆盖逻辑陷阱
sm:text-xl 不是“仅在 sm 断点生效”，而是“≥sm 宽度时启用，并覆盖更小断点的所有同名属性”。一旦它被应用，text-fluid 的 font-size 声明就被干掉了。
立即学习“前端免费学习笔记（深入）”；
- 流体字号本身已是连续响应，不需要再叠加断点类
- 真要分段控制（比如移动端一套
clamp，桌面端换另一套），得定义多个独立键：fluid-mobile、fluid-desktop，再配合sm:font-fluid-mobile md:font-fluid-desktop - 注意：
sm:前缀只控制类是否启用，不改变clamp()内部的vw计算基准——它永远基于 viewport 宽度，不是容器宽度
容器宽度受限时 clamp(1rem, 2.5vw, 1.5rem) 看起来“过大”？vw 不是万能解
当内容放在 max-w-3xl 这类受限容器中，2.5vw 仍按整个视口计算，导致字号远超容器实际可用空间，视觉脱节。
- 此时应放弃纯
vw，改用calc()+ 容器宽度变量（需 CSS 自定义属性配合）或container+width+min()/max()组合 -
vmin在横屏手机上容易过小，rem则失去流式意义，vw是最稳起点，但不是终点 - 真正麻烦的从来不是写对
clamp()，而是 fallback 字体栈是否匹配、dir="rtl"切换时字体别名是否同步、SSR 首屏是否因服务端无 viewport 导致字体错位
