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