新增断点必须用 theme.extend.screens，直接改 theme.screens 会清空默认断点；值须为带单位字符串如 '1920px'；修改后需重启开发服务器；v4 中改用 @theme { --breakpoint-xl2: 1920px; } 声明。
tailwind.config.js 里新增断点必须用 theme.extend.screens
直接改 theme.screens 会清空所有默认断点，sm:、lg: 全部失效。只扩展新断点，就写在 extend.screens 里：
✅ 正确：xl2: '1920px'、ultra: '2560px'
❌ 错误：1920: '1920px'（纯数字键名生成非法选择器 1920:text-center）
❌ 错误：xl2: 1920 或 xl2: '1920'（单位缺失，值不是合法 CSS 宽度字符串）
值必须是带单位的字符串：'1920px' 或 '120rem' 都行，但不能省略单位
改完配置后 xl2:w-full 不生效？先杀进程再重启
Tailwind 是编译时工具，tailwind.config.js 修改后热更新不触发 CSS 重建。
必须彻底终止当前开发服务器（Ctrl+C），再重新运行 npm run dev（或 pnpm dev 等）
检查生成的 CSS 文件里是否真有 @media (min-width: 1920px) 块——没有就说明构建根本没跑新配置
如果用了 PurgeCSS，确保模板中实际写了 xl2:w-full 这类类名，否则会被静默剔除
调试时别信 DevTools 设备模拟器的视口宽度，关掉它，用 window.innerWidth 看真实值
Tailwind v4 的断点写法完全不同：改用 @theme 声明变量
v4 废掉了 tailwind.config.js，断点必须用原生 CSS 变量声明：
✅ 正确：@theme { --breakpoint-xl2: 1920px; }
❌ 错误：@theme static { ... }（static 不会生成媒体查询，xl2: 类压根不会出现）
变量名必须带 --breakpoint- 前缀，值推荐用 rem（v4 默认按 rem 解析），px 也能用但要注意转换一致性
旧 v3.x 配置文件升级到 v4 后完全无效，连 sm: 都会消失
别忽略断点和构建流程的强耦合关系
哪怕配置全对，漏掉重启、PurgeCSS 扫描路径没覆盖、或者 v4 里错用了 @theme static，都会让新断点类静默失效——浏览器既不报错也不渲染，你只能靠查生成 CSS 或执行 getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-xl2') 来确认
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
