最安全方式是在tailwind.config.js的theme.extend.screens中添加键值对；数组、函数或不带单位的值均无效，且必须重启服务。
直接在 tailwind.config.js 的 theme.extend.screens 里加键值对，是最安全、最常用的方式。写错格式、漏默认断点、不重启服务——这三件事做错一个，新断点就完全不会出现在生成的 CSS 中。
为什么 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: 480虽然某些场景下会自动补px，但xs: '480px'更稳；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)。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合法：
xs: '480px'、tablet: '768px'、print: '0px'（用于 print 媒体） - ❌ 无效：
1440: '1440px'（纯数字键 → 生成非法选择器1440:text-center，浏览器丢弃） - ⚠️ 如果用了 PurgeCSS 或
content扫描，确保模板中真实写了xs:w-6这类类名，否则会被剔除 - 调试时别信 DevTools 设备模拟器的宽度读数——它影响
window.innerWidth，但不改变真实渲染视口，缩到 320px 宽得关掉模拟器再试
v3.3+ 和 v4 的关键兼容性差异
v3.3+ 起，DEFAULT 断点键名已改为小写 default；v4 彻底弃用 JS 配置，改用 CSS 中的 @theme 声明 --breakpoint-xxx 变量，且不再支持 extend 写法。
- v3.4 项目中写
DEFAULT: '1200px'→ 被忽略，xl:仍按默认值走 - v4 项目中继续在
tailwind.config.js里配screens→ 不生效，必须改用@theme --breakpoint-xs: 480px等 CSS 声明 - 无论哪个版本，改完配置都必须重启开发服务器；Nuxt/Next 等框架还需清缓存目录（如
.nuxt或.next）
最容易被忽略的是断点背后的行为耦合：你以为只是调了一个像素值，其实是在动整个响应式系统的地基。哪怕只改 lg，也要确认所有依赖它的插件是否仍能输出类——因为 Tailwind 不报错，它只是默默不生成。
