最安全方式是在tailwind.config.js的theme.extend.screens中添加键值对；数组、函数、无单位值等写法均无效，v3.3+会静默忽略且不报错。
直接在 tailwind.config.js 的 theme.extend.screens 中添加键值对，是最安全、最可靠的方式。其他写法（比如数组、函数、漏单位、不重启）都会导致新断点完全不生成 CSS 类——而且控制台零报错，你只会发现 xl2:w-full 死活不生效。
为什么 screens: ['640px'] 这种写法完全无效
Tailwind v3.3+ 严格要求 screens 必须是键值对对象，数组会被静默忽略，连构建错误都不报。你写的 md:text-lg 在最终 CSS 文件里压根不存在，浏览器自然不认。
- ✅ 正确：
screens: { sm: '640px' }或更推荐的extend: { screens: { xs: '480px' } } - ❌ 错误：
screens: ['640px']（数组）、screens: () => ({ sm: '640px' })（函数，v3.3+ 默认不支持） - ⚠️ 值必须是带单位的字符串：
xs: '480px'稳；xs: 480或xs: '480'可能被跳过解析；xs: '480em'同样风险高
theme.extend.screens 和 theme.screens 的本质区别
theme.screens 是全量替换，漏掉任何一个默认断点（比如 lg），对应的所有 lg:xxx 类就彻底消失；theme.extend.screens 是增量合并，只新增或覆盖指定项，其余保持原样。
- 想加
desktop: '1440px'同时保留sm/md/lg？用extend - 想把
lg从'1024px'改成'1100px'？也用extend，避免第三方插件（如@tailwindcss/aspect-ratio）因找不到lg前缀而失效 - 直接写
screens对象时，必须显式列出所有要用的断点，包括'2xl'这种带引号的键名
新增非标断点（如 xs、landscape）的实操要点
名字可以随便起，但语义和行为得自己心里有数：xs 不代表“超小屏”，它只是个 @media (min-width: 480px) 查询；landscape 也不是横屏检测，它仍是 min-width，真要匹配横屏得手动写 @media (min-width: 768px) and (orientation: landscape)。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合法：
xs: '480px'、tablet: '768px'、print: '0px'（用于 print 媒体） - ❌ 无效：
1440: '1440px'（纯数字键 → 生成非法选择器1440:text-center，浏览器丢弃） - ⚠️ 如果用了 PurgeCSS 或
content扫描，确保模板中真实写了xs:w-6这类类名，否则会被剔除 - 调试时别信 DevTools 设备模拟器的宽度读数——它影响
window.innerWidth，但不改变真实渲染视口，缩到 320px 宽得关掉模拟器再试
真正容易被忽略的是：断点值本身可能已被项目配置修改过，sm 不一定等于 640px——调试前先打开 tailwind.config.js 确认实际定义，比背官方默认值管用得多。
