必须用theme.extend.screens安全增/改断点，直接改theme.screens会清空默认断点导致sm:、lg:等全部失效；值须为带单位字符串（如'480px'），数组或函数写法静默无效，修改后需重启构建进程。
直接改 theme.screens 会清空所有默认断点，sm:、lg:、2xl: 全部失效；必须用 theme.extend.screens 增量添加或覆盖，且值必须是带单位的字符串（如 '480px'），改完还得重启构建进程。
为什么 screens: ['640px', '768px'] 完全不生效
Tailwind v3.3+ 严格要求 screens 是键值对对象，数组写法会被静默忽略——不报错、不生成任何 @media 规则。你写的 md:text-lg 在最终 CSS 文件里根本不存在，浏览器自然不认。
- 常见诱因：复制了旧版文档或 Stack Overflow 上过时的数组示例
- 验证方法：打开构建后的 CSS 文件，搜索
@media (min-width: 640px)，没这段就说明配置没被识别 - v3.3+ 连
screens: () => ({ sm: '640px' })这种函数写法也不支持（除非显式启用 JIT 扩展）
如何用 theme.extend.screens 安全新增或修改断点
这是唯一推荐的方式：只动你想改的键，其余断点保持原样，插件兼容性不受影响。
- 覆盖一个默认值（比如把
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），也不能含空格或特殊字符 - 值必须是带单位的字符串：
'480px'✅，480❌，'20rem'✅（但必须加引号）
改完没生效？立刻检查这三件事
Tailwind 的响应式类是构建时静态生成的，热更新不会触发重编译。
- 手动终止当前
npm run dev或pnpm dev进程，再重新启动 - 搜索生成的 CSS 文件，确认有类似
@media (min-width: 1100px)的块 - Nuxt/Next 等框架缓存更顽固，需清
.nuxt或.next目录，或加--no-cache
最容易被忽略的是第三方插件耦合：比如 @tailwindcss/aspect-ratio 会根据 lg 断点生成 lg:aspect-video，你调了 lg 却没验证插件是否还输出对应类，上线后某些布局可能直接崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
