最稳妥方式是使用theme.extend.screens添加键值对；数组或函数写法在v3.3+及v4中均被静默忽略，必须用带单位字符串的键值对，且修改后需重启开发服务器。
直接在 tailwind.config.js 的 theme.extend.screens 里加键值对，是最稳妥、最不容易出问题的方式；改错格式、漏默认断点、不重启服务——三者任一发生，新断点就完全不会出现在生成的 CSS 中。
为什么 screens: ['640px'] 这种写法完全无效
Tailwind v3.3+（包括当前稳定版 v4）已彻底弃用数组和函数写法：screens: ['640px'] 或 screens: () => ({ sm: '640px' }) 都会被静默忽略，连构建警告都没有。结果就是你写的 md:text-lg 类压根不会生成，DevTools 里搜不到对应规则，浏览器自然不生效。
- ✅ 正确格式只有一种：键值对对象，且值必须是带单位的字符串，如
'sm': '640px'或'xs': '480px' - ❌ 纯数字键名（如
1440: '1440px'）会生成非法选择器1440:text-center，CSS 解析器直接丢弃 - ❌ 值缺单位（如
xs: 480或xs: '480'）不被识别，等同于没写
theme.extend.screens 和 theme.screens 的本质区别
theme.screens 是全量覆盖，theme.extend.screens 是增量合并——这是最关键的分水岭。
- 用
theme.screens = { sm: '640px', md: '768px' }会清空默认的lg、xl、'2xl'，所有lg:*类消失，@tailwindcss/aspect-ratio这类依赖lg前缀的插件也会报错或失效 - 用
extend.screens只动你想改或加的项：lg: '1100px'会覆盖默认值，xs: '480px'和desktop: '1440px'会新增，其余断点照常保留 - v4 中仍支持此写法，但注意：v4 同时引入了
@themeCSS 变量方式，两者不互通，不能混用
如何添加超大屏或非标断点（如 xl2、landscape）
名字可以自定义，但行为要自己理解清楚：Tailwind 的断点本质只是 @media (min-width: ...)，不是“仅在此尺寸生效”，也不是横屏检测。
- ✅ 合法新增：
xl2: '1920px'、ultra: '2560px'、print: '0px'（用于 print 媒体） - ⚠️ 注意语义：
landscape: '768px'不等于横屏，它仍是@media (min-width: 768px)；真要匹配横屏需手写@media (min-width: 768px) and (orientation: landscape) - ⚠️ PurgeCSS 影响：如果模板里没真实出现
xl2:w-full字符串，该规则会被剔除——别只靠 DevTools 模拟器验证，得看最终生成的 CSS 文件是否含@media (min-width: 1920px)
最容易被忽略的一点：改完配置后必须手动终止并重启开发服务器（npm run dev 或 pnpm dev），热更新不会重新读取 tailwind.config.js。哪怕只改一个像素，没重启，就等于白改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
