最安全的方式是在 tailwind.config.js 的 theme.extend.screens 中添加键值对；写错格式、漏单位或未重启服务会导致新断点不生效，且 PurgeCSS 可能剔除未在模板中出现的类。
直接在 tailwind.config.js 的 theme.extend.screens 里加键值对，是最安全、最常用的方式。写错格式、漏单位、不重启服务——这三件事做错一个，新断点就完全不会出现在生成的 CSS 中。
为什么 xl2:w-full 在浏览器里没反应？
最常见的不是配置写错了，而是开发服务器没重启。Tailwind 是编译时工具，tailwind.config.js 修改后必须完全 kill 并重新运行 npm run dev（热更新不触发重编译）。另一个隐蔽问题是 PurgeCSS：如果模板里没真实出现 xl2:w-full 这类字符串，它会被自动剔除。
- 检查构建后的 CSS 文件中是否存在
@media (min-width: 1920px) - 在 DevTools Elements 面板里手动给元素加该类，看是否立刻生效
- 调试时注意关掉 DevTools 设备模拟器——它影响
window.innerWidth，但不改变真实渲染视口
screens 必须是对象，不能是数组或函数
Tailwind 只识别键值对形式的 screens，例如 sm: '640px'。常见错误包括：
- 写成数组：
screens: ['640px', '768px']→ 整个响应式系统静默失效 - 值漏单位：
xl2: 1920或xl2: '1920'→ 生成的 CSS 里没有对应类 - 键名用纯数字：
1920: '1920px'→ 生成非法选择器1920:w-full，浏览器直接忽略 - v3.3+ 起，
DEFAULT已改为小写default；写错就等于没覆盖根断点
用 extend.screens 安全新增或覆盖断点
想加超大屏断点又不想丢掉默认的 sm、lg，就别碰 theme.screens，改用 theme.extend.screens：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐写法：
module.exports = { theme: { extend: { screens: { xl2: '1920px', ultra: '2560px' } } } } - 若只想把
lg改为'1100px'，同样走extend，其他断点保持默认 - 新增语义化断点如
desktop: '1440px'或landscape: '768px'也建议用extend，避免影响第三方插件识别前缀 - 注意：
landscape不代表自动匹配横屏，它只是min-width查询；真要响应方向，得手写@media (min-width: 768px) and (orientation: landscape)
真正容易被忽略的是：断点值本身可能已被项目配置修改过，sm 不一定等于 '640px'——调试前先打开 tailwind.config.js 确认实际定义，比背官方默认值管用得多。
