必须用theme.extend.screens安全增/改断点，直接改theme.screens或用数组写法会删默认断点导致lg:、xl:失效；screens必须为键值对对象，值须为带单位字符串（如'480px'），修改后需重启构建进程。
必须用 theme.extend.screens，直接改 theme.screens 或写成数组会删掉默认断点，lg:、xl: 全部失效。
为什么 screens: ['640px'] 完全不生效
Tailwind v3.3+ 严格要求 screens 是纯对象（key-value），数组会被静默跳过——不报错、不生成任何 @media 规则。sm:text-lg 在最终 CSS 里根本不存在。常见诱因是复制了旧版文档或 Stack Overflow 上的过时配置。
- ✅ 正确：
screens: { sm: '640px' }或更推荐的extend: { screens: { xs: '480px' } } - ❌ 错误：
screens: ['640px']（数组）、screens: () => ({ sm: '640px' })（函数，v3.3+ 默认不支持） - ⚠️ 值必须是带单位的字符串：
'480px'✅，480❌，'480'❌，'20rem'✅（但必须加引号）
怎样安全新增或修改断点
只通过 theme.extend.screens 操作，才能保留默认断点和插件兼容性。第三方插件（如 @tailwindcss/aspect-ratio）依赖 lg: 等前缀生成类；你改了 lg 却没验证插件是否还输出 lg:aspect-video，上线后布局可能直接崩。
- 改一个值（比如把
lg从'1024px'改成'1100px'）：extend: { screens: { lg: '1100px' } } - 新增断点（如
xs或desktop）：extend: { screens: { xs: '480px', desktop: '1440px' } }，之后就能用xs:hidden、desktop:w-1/2 - 键名不能含空格或特殊字符，也不能是纯数字：
'1440': '1440px'→ 生成非法选择器1440:w-4，浏览器丢弃
改完没生效？立刻查这三件事
Tailwind 的响应式类是构建时静态生成的，热更新 tailwind.config.js 不会触发重编译。
立即学习“前端免费学习笔记（深入）”；
- 手动终止当前
npm run dev进程，再重新启动 - 搜索构建后的 CSS 文件，确认有类似
@media (min-width: 1100px)的块 - Nuxt/Next 等框架缓存更顽固，需清
.nuxt或.next目录，或加--no-cache
容易被忽略的耦合点：断点不是孤立像素值
你调了 lg，但没验证 @tailwindcss/aspect-ratio 是否仍输出 lg:aspect-video；你加了 landscape: '768px'，却以为它能匹配横屏——其实它只是 @media (min-width: 768px)，和方向无关。真要响应横屏，得手写 @media (min-width: 768px) and (orientation: landscape) 或用 tailwindcss-orientation 插件。调试时务必关掉 DevTools 设备模拟器，否则视口宽度读数不准。
