Tailwind 的 screens 是全量替换，修改需保留全部断点；断点类变更后必须重建 CSS；流式字体用 clamp() 配合 vw；max-md 等变体依赖配置值推导；响应类覆盖遵循升序书写规则。
为什么直接改 theme.screens 后断点类不生效
Tailwind 对 screens 是全量替换，不是增量合并。你只写 md: '720px'，默认的 sm、lg 等就全没了——sm:text-sm 这类类名根本不会生成。
必须显式保留全部断点，哪怕只改一个：
module.exports = {
theme: {
screens: {
sm: '640px',
md: '720px', // 自定义
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
}
}
}
改完必须重建 CSS：npm run build 或 npx tailwindcss -i ./src/input.css -o ./dist/output.css；热重载（watch）通常不触发断点类再生。
如何让字体大小随视口平滑缩放（非阶梯式）
Tailwind 默认断点是离散的（sm、md…），但流式排版需要连续响应。不能靠堆 sm:text-base md:text-lg lg:text-xl，那只是多档切换。
正确做法是用 CSS clamp() 配合自定义 class：
.fluid-text {
font-size: clamp(1rem, 2.5vw, 1.5rem);
}
然后在 HTML 中混用：
——小屏用 clamp 流式缩放，中屏及以上固定为 text-xl（避免过大）。
注意：clamp() 的中间值用 vw 最稳；vmin 在横屏手机上可能过小，rem 则失去流式意义。
自定义断点后 max-md 类突然失效
max-md 不是“md 断点的反向”，而是依赖 theme.screens.md 值推导出的媒体查询：@media (max-width: 767px)（即 md 下一档的上限）。一旦你把 md 改成 '720px'，max-md 就自动变成 @media (max-width: 719px)。
这意味着：
- 如果原设计稿要求「≤720px 隐藏某模块」，该用
max-md:hidden，而不是sm:hidden - 若你删了
sm断点，max-sm也会消失——它不回退到上一个断点 -
md:max-xl这种组合变体，上下限都严格按配置值计算，中间缝隙（如 720–1023px）需手动补md:xxx lg:-xxx
移动端优先下，text-sm 和 sm:text-base 的覆盖逻辑容易误判
很多人以为 sm:text-base 是“仅在 sm 生效”，其实它是“≥640px 时启用，并覆盖掉更小断点的同名属性”。所以：
-
text-sm sm:text-base→ 小屏sm，中屏起base -
sm:text-base text-sm→ 顺序错了！text-sm写在后面，会覆盖掉sm:text-base，导致所有尺寸都是sm - 想实现“小屏
sm，中屏base，大屏lg”，必须严格按断点升序写：text-sm sm:text-base lg:text-lg
这个顺序问题在调试时最隐蔽——浏览器 DevTools 里看 computed styles 会显示最终值，但 class list 里两个类都存在，容易误以为是逻辑错误而非书写顺序问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
