直接修改 theme.screens 会清空默认断点导致 lg/xl 等失效，正确做法是仅在 theme.extend.screens 中增改；xs 断点推荐设为 '412px' 适配大屏手机竖屏，键名不可为纯数字，修改后需重启开发服务器。
直接改 theme.screens 会丢掉所有默认断点
很多人一上来就写 theme: { screens: { sm: '480px', md: '768px' } }，结果发现 lg:w-full、xl:text-lg 全都不生效。这是因为 theme.screens 是全量替换，不是追加——Tailwind 默认的 lg、xl、2xl 断点被彻底清空了，第三方插件（比如 @tailwindcss/aspect-ratio）依赖的前缀也跟着失效。
- ✅ 正确做法：只在
theme.extend.screens里加你想改或新增的项，其余保持原样 - ❌ 错误写法：
screens: ['640px']（数组会被静默忽略，连sm:都不生成） - ⚠️ 值必须是带单位的字符串：
'480px'✅，480或'480'❌
sm 到 2xl 的默认值其实不够用
默认 sm: '640px' 对应的是「小屏横屏」，但很多安卓手机竖屏宽度就超 412px，iOS 竖屏常见 390px。如果你的移动端用户集中在低端机型或折叠屏设备，基础断点得往下沉。
- 推荐补一个
xs断点：xs: '412px'，用于适配竖屏大屏手机 - 如果要做折叠屏支持，可加
fold: '540px'（对应 Galaxy Z Fold 竖屏内屏宽度） - 键名不能是纯数字：
'412': '412px'会生成非法选择器412:hidden，浏览器直接丢弃 - 修改后必须重启开发服务器——Tailwind 是编译时生成类，热更新不会重建 CSS
别信 DevTools 设备模拟器的宽度读数
你在 Chrome DevTools 里把窗口缩到 412px 宽，xs:hidden 就不触发。因为模拟器改的是 window.innerWidth，但真实媒体查询匹配的是渲染视口（layout viewport），而模拟器会注入额外的 meta 标签或强制缩放逻辑。
- 调试时务必关掉 Device Mode，用真机访问，或用
getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-xs')（v4）验证变量是否注入 - 检查构建后的 CSS 文件，搜索
@media (min-width: 412px)是否存在；不存在说明配置没生效或 PurgeCSS 把它剔除了 - 确保模板里真实写了
xs:hidden这类类名，否则 PurgeCSS 默认会删掉未引用的响应式类
移动端真正要防的是“伪横屏”和“高 DPR 缩放”
很多用户把手机横过来，但页面没响应——不是断点写错了，而是 landscape: 并不等于横屏检测。Tailwind 的 landscape: '768px' 只是定义了一个叫 landscape 的最小宽度断点，最终生成的是 @media (min-width: 768px)，和方向无关。
- 真要响应横屏，必须手动写媒体查询：
@media (min-width: 768px) and (orientation: landscape) - 或者用插件
tailwindcss-orientation，它会自动注册landscape:和portrait:前缀 - 注意：orientation 在桌面浏览器基本无效，只对移动设备或支持
screen.orientationAPI 的环境有意义 - 高 DPR 设备（如 iPhone 15 Pro Max）可能让 412px 物理像素渲染成 206px CSS 像素，此时断点需按 CSS 像素而非物理像素设
landscape: 做方向判断——它从来就不是为这个设计的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
