Tailwind默认移动优先，无前缀类作用于最小屏幕，sm:等前缀表示≥该宽度才启用；错误写法sm:hidden md:block会导致小屏显示异常，因sm:hidden仅在≥640px时隐藏。
移动端优先是Tailwind的默认行为，不是可选项
Tailwind CSS 的断点系统从设计上就是移动优先（mobile-first）：所有不带前缀的类（比如 text-sm、flex、hidden）默认在最小屏幕（即手机竖屏）生效，而 sm:、md: 等前缀表示「≥该宽度时才启用」。这不是风格偏好，而是构建逻辑——Tailwind 的 CSS 输出按断点从小到大顺序生成，小屏规则写在前面，大屏覆盖写在后面，浏览器层叠天然支持这种覆盖。
写反断点顺序会导致小屏显示异常
常见错误是把隐藏逻辑写成 sm:hidden md:block，以为“小屏隐藏、中屏显示”，结果发现小屏反而显示了。原因在于：sm:hidden 表示「≥640px 时隐藏」，它对手机竖屏（通常 block）始终生效。所以正确写法是：hidden sm:block——先默认隐藏，再在 ≥640px 时显式显示。
-
hidden→ 所有尺寸都隐藏 -
sm:block→ ≥640px 时覆盖为 block - 漏掉
sm:前缀的类不会自动继承或推导，必须显式声明
viewport meta 标签缺失会让断点完全失效
即使写了 md:flex，如果 HTML 中没加 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端浏览器会以桌面视口（通常是 980px 宽）渲染页面，导致 sm:（≥640px）在手机上立刻触发，md:（≥768px）也几乎总成立——断点数值和实际设备宽度脱节，响应式彻底失灵。
- 这是上线前最容易被忽略的硬性依赖
- Vue/React 项目常因 SSR 或模板遗漏导致该标签缺失
- 用 DevTools 切换设备模拟器时，务必检查右上角是否显示「Responsive」且宽度值合理
自定义断点必须与配置严格一致
你不能随便写 tablet:text-center，除非在 tailwind.config.js 的 theme.screens 里明确定义了 tablet。Tailwind 构建时只扫描配置中声明的断点名，其余一概忽略。
立即学习“前端免费学习笔记（深入）”；
- 默认断点是
{ sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px' } - 改配置后，旧类名（如
md:）不再对应原尺寸，必须同步更新所有使用处 - 动态拼接类名（如
className={`text-${size}`}）无法被扫描，响应式前缀必须静态写出
hidden 再用 md:block 覆盖，而不是反过来。这点一旦写错，调试时很难联想到是断点逻辑理解偏差。 
