screens 必须是键值对对象，如 {sm: '640px', md: '768px'}；全量覆盖会丢失默认断点，应使用 theme.extend.screens 增量修改；改后须重启开发服务器，且断点仅表示 min-width，非区间限定。
tailwind.config.js 中 screens 必须是对象，不是数组或函数
写成 screens: ['640px', '768px'] 或 screens: () => ({ sm: '640px' }) 在 Tailwind v3.3+ 中会静默失效——不报错、不警告、也不生成对应 CSS。比如你加了 md:text-lg，浏览器里查不到这个类，控制台也看不到任何提示。
真正起作用的只有键值对对象：screens: { sm: '640px', md: '768px' }。但注意：这属于全量覆盖，漏掉任何一个默认断点（比如 lg），所有 lg: 开头的类就彻底消失，连 @tailwindcss/aspect-ratio 这类插件也可能出问题。
新增或修改断点必须用 theme.extend.screens
想加一个 xs 断点，或者把 lg 从 '1024px' 改成 '1100px'，应该只写要改/加的部分：
module.exports = {
theme: {
extend: {
screens: {
xs: '480px',
lg: '1100px',
desktop: '1440px'
}
}
}
}
这样既保留全部默认断点（sm、md、xl、2xl），又精准扩展或覆盖个别项。键名不能是纯数字（'1440': '1440px' 会生成非法选择器），值必须是带单位的字符串（'480px' ✅，480 ❌）。
改完配置后必须重启开发服务器
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，是设计逻辑——它表示「≥768px 时启用」，且会继承向下覆盖。这意味着：
- 别指望
sm:hidden lg:block让元素只在大屏显示；实际是小屏隐藏、中屏开始显示、大屏继续显示 - 真要“仅在某段区间生效”，得靠组合，比如
block sm:hidden md:block lg:hidden - 改一个像素值（如把
lg从'1024px'改成'1100px'），会影响所有依赖该断点的第三方插件和已有类名行为
最常被忽略的一点：断点改动后，没人会主动告诉你哪些插件悄悄挂了，尤其当项目用了多个 Tailwind 插件时，隐式断点依赖很难被发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
