应按mobile-first从小到大逐级设置：text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl，确保每个断点区间都有对应字号，避免因缺失中间断点导致视觉跳变。
text-base 到 text-2xl 的断点链怎么写才不跳变
响应式字体大小最常踩的坑是「跳变」：比如从 text-base 直接跳到 lg:text-2xl，中间缺了 md:text-lg，导致在 768–1023px 区间字体突然放大一倍。Tailwind 不会自动插值，它只按你写的类生成对应媒体查询。
推荐写法是逐级递进，且保持基础类始终存在：
-
text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl—— 小屏最小，逐级放大，无断层 - 避免
text-base lg:text-2xl这种跳跃式写法，768–1023px 仍用text-base，但视觉上可能太小 - 如果设计稿只要三档（手机/平板/桌面），也建议补全中间断点，哪怕值相同：
text-base md:text-base lg:text-xl，明确表达意图
为什么 sm:text-lg 在大屏下依然生效
因为 Tailwind 的断点前缀是「≥」语义，不是「仅限于」。写 sm:text-lg 意味着「从 640px 起一直生效」，直到被后续更具体的断点覆盖（比如 lg:text-xl）。
常见误解是以为 sm: 只作用于小屏设备，其实它对所有 ≥640px 的视口都起效，包括 2xl 屏幕。所以：
立即学习“前端免费学习笔记（深入）”；
- 想让某样式「只在 sm 断点生效」？Tailwind 不支持单点区间，只能靠组合覆盖：
text-base sm:text-lg md:text-base - 想「仅在 lg 及以上隐藏」？别写
lg:hidden单独用，要配合基础显示：block lg:hidden（默认显示，lg+ 隐藏） - 浏览器 DevTools 里看到多个
font-size声明？说明有冲突，后写的类会覆盖前面的
自定义断点后 text-* 类没反应？先查 screens 配置方式
改了 tailwind.config.js 里的断点，但 md:text-lg 突然不生成 CSS —— 大概率是误用了 screens: [...] 数组写法。Tailwind v3.3+ 已完全不支持数组或函数返回对象的方式，只认纯 key-value 对象。
正确做法只有这一种：
module.exports = {
theme: {
extend: {
screens: {
md: '800px', // 覆盖默认 md:768px
desktop: '1440px' // 新增断点，之后可用 desktop:text-3xl
}
}
}
}改完必须做三件事：
- 终止并重启
npm run dev（热更新不触发重编译） - 搜索构建后的 CSS 文件，确认有
@media (min-width: 800px)块 - 检查第三方插件是否依赖原断点名（如
@tailwindcss/aspect-ratio会读取lg值生成类，你改了lg却没验证插件输出，上线就崩）
line-clamp 和 font-size 断点不同步怎么办
line-clamp-2 和 text-lg 本身不耦合，但实际中经常一起用——比如卡片标题在小屏截 2 行、大屏放开到 3 行。问题在于：断点错位会导致截断失效或文字溢出容器。
安全做法是让它们共用同一断点层级：
- 错：
line-clamp-2 sm:line-clamp-3 text-base md:text-lg（sm和md不对齐） - 对：
line-clamp-2 md:line-clamp-3 text-base md:text-lg（都在md触发） - 更稳：加
min-h-[3em]或h-auto防止因行高变化导致高度塌陷
真正容易被忽略的是：line-clamp 是基于行高计算的，而行高又受 font-size 影响。如果断点前后 font-size 变化太大（比如从 14px → 24px），但没同步调 leading-，line-clamp-2 实际能容纳的文字行数可能少于预期。
