必须用theme.extend.screens添加键值对并重启服务，因theme.screens全量替换会丢失默认断点及第三方插件依赖；键名须语义化、值须带单位，数组/纯数字键名/无单位值均静默失效。
直接在 tailwind.config.js 的 theme.extend.screens 里加键值对，比如 xl2: '1920px' 或 ultra: '2560px'，改完必须重启开发服务器，否则新类名根本不会生成。
为什么不能直接写 screens: { ... }？
因为 theme.screens 是全量替换——一旦你这么写，所有默认断点（sm、md、lg 等）都会消失，连带第三方插件（如 @tailwindcss/aspect-ratio）依赖的前缀类也失效。控制台不报错，但 HTML 里写的 lg:w-full 在浏览器中完全没效果，排查起来极难定位。
theme.extend.screens 的写法和常见错误
只扩展你想加或改的断点，其余保持原样：
- ✅ 正确：
xl2: '1920px'、ultra: '2560px'、desktop: '1440px'—— 键名语义化，值是带单位的字符串 - ❌ 错误：
1920: '1920px'（纯数字键名 → 生成非法选择器1920:w-6，浏览器直接忽略） - ❌ 错误：
xl2: 1920（漏单位 → 静默失效，CSS 里查不到对应媒体查询） - ❌ 错误：
screens: ['1920px']（数组格式 → v3.3+ 完全跳过解析，无警告无输出）
配置生效后怎么验证？
三个动作缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 手动终止
npm run dev或pnpm dev进程，再重新启动 —— 热更新不读新配置 - 打开最终生成的 CSS 文件（如
dist/output.css），搜索@media (min-width: 1920px)，确认媒体查询存在 - 检查模板中是否真实写了
xl2:text-lg这类类名；若启用了 PurgeCSS，没在代码中引用就会被剔除
超大屏断点不是“仅在此尺寸生效”，而是 min-width 查询，所以 xl2:w-1/2 在 3840px 下依然起作用——这点容易被当成 bug 去调，其实正是 Tailwind 的设计逻辑。真正要小心的是：改一个像素值，可能影响多个插件隐式依赖的断点边界，尤其当项目已接入 3 个以上 Tailwind 插件时。
