直接改tailwind.config.js中的screens必须用键值对对象，数组或函数写法在v3.3+中静默失效；theme.extend.screens才是安全扩展方式，且修改后必须重启开发服务器。
直接改 tailwind.config.js 里的 screens 配置就能生效，但错一个字符、漏一个默认断点、不重启服务，新断点就完全不会出现在生成的 CSS 中。
为什么 screens: ['640px', '768px'] 完全没用
Tailwind v3.3+ 要求 screens 必须是键值对对象，数组会被静默忽略——连构建警告都没有。md:text-lg 这类类名压根不会生成，浏览器自然找不到对应样式。函数写法如 screens: () => ({ sm: '640px' }) 同样失效（除非你手动启用 JIT 扩展并配置）。
- ✅ 正确：
screens: { sm: '640px', md: '768px' } - ⚠️ 更安全：
theme.extend.screens: { xs: '480px', desktop: '1440px' } - ❌ 错误：
screens: ['640px']、screens: { 1440: '1440px' }（纯数字键名生成非法选择器）
用 theme.extend.screens 而不是 theme.screens
theme.screens 是全量替换，漏掉任何一个默认断点（比如 lg 或带引号的 '2xl'），对应的所有 lg:xxx 类就彻底消失，第三方插件（如 @tailwindcss/aspect-ratio）也可能报错或失效。
- 想改
lg从'1024px'到'1100px'？只写extend: { screens: { lg: '1100px' } } - 想加
xs和desktop？同样走extend，不用管其他键 - 键名不能含空格、特殊字符，也不能是纯数字；值必须是带单位的字符串，如
'480px'或'20rem'
改完配置后必须重启开发服务器
Tailwind 的响应式类是构建时静态生成的，热更新不会重新读取 tailwind.config.js。改完不重启，等于没改。
- 手动终止
npm run dev或pnpm dev进程，再重新启动 - 打开最终生成的 CSS 文件，搜索
@media (min-width: 1100px)确认媒体查询存在 - 检查模板中是否真实写了
xs:w-6这类类名；若启用了 PurgeCSS，没引用就会被剔除
最常被忽略的一点：断点只是 min-width 媒体查询，不是“仅在此尺寸生效”。md:text-lg 在 1280px 下依然起作用——这不是 bug，是设计逻辑。改一个像素值，实际是在动整个响应式系统的地基，尤其当项目依赖多个插件时，隐式断点依赖很难被发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
