Tailwind移动端优先是底层逻辑，必须加viewport声明且类名顺序正确；否则sm:/md:不生效、真机布局错乱。断点基于min-width（如sm:≥640px），类名后写覆盖前写，正确写法为w-full md:w-1/2 lg:w-1/3。
移动端优先不是可选项，是 Tailwind 的底层运行逻辑；不按这个写，sm:、md: 类根本不会触发，真机上布局直接错乱。
必须加 <meta name="viewport"> 才能生效
浏览器默认把页面当桌面渲染，缩成一团、横向滚动、sm: 根本不触发——这不是 Tailwind 的问题，是缺失视口声明的必然结果。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在<head>里，且不能漏掉initial-scale=1.0 - 用 Next.js / Nuxt 等框架时，检查是否被自动生成的
viewport覆盖（比如带了user-scalable=no） - 真机调试前，先用 Chrome DevTools 的 Device Toolbar 选具体型号（如 iPhone 14），别只用 “Responsive” 模式糊弄
sm: 不生效？先确认屏幕宽度是否 ≥640px
Tailwind 的断点是 min-width，不是“当前屏幕宽度等于多少”。sm: 对应 640px，意思是「仅当屏幕宽度 ≥640px 时才启用」。
- iPhone SE 竖屏（375px）→ 只走无前缀类（即默认移动端样式）
- iPhone 14 横屏（844px）→ 触发
sm:，但不触发md:（需 ≥768px） - 想强制小屏也生效？改配置或用
@screen sm { }写内联 CSS，但这违背移动优先原则，慎用
类名顺序写反了，md:w-1/2 w-full 就是错的
Tailwind 是按 HTML 中类名出现顺序应用样式的。后写的类会覆盖前面同属性的类，但仅在对应断点生效。
立即学习“前端免费学习笔记（深入）”；
-
md:w-1/2 w-full→ 先设 md 下为 1/2，再无条件覆盖成 full，导致 md 断点失效 - 正确写法：
w-full md:w-1/2 lg:w-1/3（小屏全宽 → 中屏半宽 → 大屏三分之一） - 常见组合：
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3、flex flex-col space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0
最常被忽略的其实是 <meta name="viewport"> 声明和类名顺序——这两处出错，其他所有响应式逻辑都建立在流沙之上。
