screens 必须为纯对象语法，数组或函数写法会导致断点失效；应使用 theme.extend.screens 修改单个断点，避免覆盖默认配置影响插件兼容性。
直接改 screens 对象就能生效，但必须用纯对象语法，数组或函数返回值（v3.3 以前）都会让断点静默失效。
为什么 screens: ['640px', '768px'] 不起作用
Tailwind 只认 screens 是一个键值对对象。写成数组会直接跳过解析，构建时既不报错也不生成对应媒体查询，所有 sm:、md: 类全消失——你写的 HTML 里有 sm:text-lg，但最终 CSS 里压根没这段规则。
- 常见诱因：复制默认配置时误粘贴了旧版文档里的数组示例
- 验证方法：打开生成的 CSS 文件，搜
@media (min-width: 640px)，不存在就说明screens没被识别 - v3.3+ 开始，连
screens: () => ({ sm: '640px' })这种函数写法也不支持（除非显式启用 JIT 扩展）
覆盖全部断点时，必须显式列出所有要用的键
写 screens 就是「完全替换」，不是「合并」。漏掉任何一个默认断点名，对应工具类就彻底不生成。
- 比如只写
{ sm: '640px', md: '768px' }，那lg:w-6、xl:hidden全部无效 - 第三方插件（如
@tailwindcss/aspect-ratio）依赖lg断点生成类，删了它，插件输出的类也会丢 - 安全做法：先
require('tailwindcss/defaultTheme')拿到默认值，再做修改
想只改一个断点？用 theme.extend.screens
这是最不容易出错的方式，尤其适合团队项目或用了多个插件的场景。
- 例如把
lg从'1024px'改成'1100px'：extend: { screens: { lg: '1100px' } } - 原有
sm、md、xl等保持不变，插件兼容性不受影响 - 新增断点（如
desktop或xs）也建议走extend，避免手抖删掉关键项 - v3.3+ 后注意：
default是小写，写成DEFAULT: '1200px'会被忽略
改完必须重启开发服务器，且检查生成 CSS
Tailwind 的响应式类是构建时静态生成的，热更新 tailwind.config.js 不会触发重编译。
- 手动终止当前
npm run dev进程，再重新启动 - 搜索生成的 CSS 文件，确认有类似
@media (min-width: 1100px)的块 - Nuxt/Next 等框架可能缓存更顽固，需清
.nuxt或.next目录，或加--no-cache - 浏览器 DevTools 的 Elements 面板里找不到新类名（如
desktop:mt-8），八成是这步没做
最容易被忽略的是断点语义和插件耦合——你以为只是改个像素值，其实是在动整个响应式系统的地基。哪怕只调一个 lg 值，也要确认所有依赖它的插件是否仍能正常输出类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
