手机上字体未变小是因为未定义最小断点类（如text-sm），仅写md:text-lg导致默认状态无font-size；tailwind不自动回退，须显式声明各断点类并按顺序书写。
text-sm md:text-lg 为什么在手机上没变小
因为没写“最小断点”的类名，只写了 md:text-lg，等于默认（无前缀）状态完全没定义字体大小。Tailwind 不会自动回退到 text-base 或其他值——它只应用你明确写的类。
常见错误现象：页面在手机上字体巨大或极小，但开发者工具里看不到 font-size 被覆盖，说明压根没命中任何 text-* 类。
- 必须显式写出最小屏的类，比如
text-sm md:text-lg lg:text-xl - 顺序不能颠倒：CSS 层叠规则下，
lg:text-xl必须写在md:text-lg后面，否则大屏时不会生效 - 检查实际视口宽度：用浏览器 DevTools 的响应式模式看当前宽度是否 ≥768px，别凭“这是平板”主观判断
- 确认项目没改断点：
md默认是min-width: 768px，但如果tailwind.config.js里重写了theme.screens.md，那它可能已是 900px 或别的值
想让字体随屏幕平滑缩放，能不能只用 text-* + 断点
不能。text-sm md:text-lg 是阶梯式切换，两个断点之间字体大小完全不变，中间没有过渡。
如果你看到“手机上字太小、平板突然跳大”，就是典型的阶梯断层表现。这不是 bug，是设计如此。
- 真要流体缩放，必须用
clamp()：例如text-[clamp(1rem,4vw+0.5rem,2rem)] - 这种写法依赖 Tailwind 的 arbitrary value 语法（方括号），需确保已启用 JIT 模式（V3.3+ 默认开启）
-
clamp()三个参数含义：最小值、理想值（含vw）、最大值；其中第二项支持calc()表达式，但不能写成clamp(1rem, 2rem, 3rem)这种静态三值——那就没流体效果了 - iOS Safari 对
clamp()支持良好（2026 年已全量支持），但旧安卓 WebView 可能不认，得加降级：font-size: 1.25rem; font-size: clamp(1rem, 4vw, 1.5rem);
自定义 fluid 字体类，为什么加了 theme.fontSize 还不生效
因为只配了 fontSize，没同步配 lineHeight。Tailwind 的字体工具类（如 text-xl）本质是同时设置 font-size 和 line-height 的复合声明，而 clamp() 值默认不带行高。
结果就是：字变大了，但行距还是老样子，文字挤在一起或留白异常。
- 正确写法要在
tailwind.config.js中完整定义，包括行高：fontSize: { 'fluid-h1': ['clamp(1.5rem, 6vw, 3rem)', { lineHeight: '1.2' }] } - 或者手动补
leading-tight/leading-normal类，但不如配置里写死来得可控 - 注意：自定义 key 名（如
fluid-h1）不能含连字符，否则解析失败；推荐用驼峰或下划线 - 改完 config 一定要重启 dev server，Tailwind 不会热更主题配置
为什么 text-xl 在不同设备上看起来大小不一致
不是 Tailwind 的问题，是 rem 单位被根元素干扰了。所有 text-* 类最终都转成 font-size: Xrem，而 1rem = 当前 html 元素的 font-size 值。
常见干扰源：全局重置 CSS 把 html { font-size: 62.5% }，或用户系统设置了“更大字号”，或 iOS Safari 自动放大短文本块。
- 先查 DevTools 计算后的
font-size像素值，看是不是预期数字（比如text-xl应该是 20px，结果算出来是 16px，说明根字号被缩了） - 禁用 iOS 自动放大：给文本容器加
text-size-adjust: none（用text-[text-size-adjust:none]或自定义 utility） - 避免全局改
html字号，除非你清楚每处rem的连锁影响；更安全的做法是用font-size: clamp(...)直接输出像素等效值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
