tailwind css中screens必须是键值对对象，如sm: '640px'；数组或函数写法在v3.3+中静默失效，值须为带单位字符串，修改后需重启开发服务器并用theme.extend.screens安全扩展。
tailwind.config.js 中 screens 必须是对象，不是数组或函数
写成 screens: ['640px', '768px'] 或 screens: () => ({ sm: '640px' }) 在 v3.3+ 里会静默失效——生成的 CSS 里压根没有 md:text-lg 这类类名，浏览器自然不认，且控制台不报错。
正确格式只有一种：screens 必须是键值对对象，例如 sm: '640px'、desktop: '1440px'。值必须是带单位的字符串，'480px' ✅，480 ❌，'480' ❌。
- 纯数字键名（如
1440: '1440px'）会导致生成非法选择器1440:w-4，浏览器直接丢弃 - 键名不能含空格或特殊字符，推荐用语义化小写字母组合，如
xs、tablet、ultra - 修改后必须重启开发服务器，否则新断点不会出现在构建输出中
用 theme.extend.screens 增量扩展，别碰 theme.screens
theme.screens 是全量替换：漏掉任何一个默认断点（比如 '2xl'），对应的所有 2xl:xxx 类就彻底消失，第三方插件（如 @tailwindcss/aspect-ratio）也可能因找不到 lg 前缀而失效。
theme.extend.screens 才是安全做法，它只新增或覆盖指定项，其余断点保持原样。
- 想加
desktop: '1440px'同时保留sm/md/lg？走extend.screens - 想把
lg从'1024px'改成'1100px'？也走extend.screens，写成lg: '1100px' - 若你用的是 v3.4+，可导入默认主题轻量参考：
const defaultTheme = require('tailwindcss/defaultTheme')，但非必需
新增断点后，类名能用但样式没生效？检查这三件事
常见现象是写了 xs:hidden，DevTools 里能看到 class 存在，但元素没隐藏——大概率是以下某个环节断了：
- 模板中没真实出现该类名（如只在 JS 字符串拼接里写了
`xs:hidden`，但没渲染到 DOM），PurgeCSS 会把它剔除 - 用了 DevTools 设备模拟器，但它的宽度读数不等于真实渲染视口；缩放窗口 ≠ 触发
@media (min-width)，真要验证得关掉模拟器或真机访问 - 断点值单位错误或格式非法，比如
xs: '480em'（em 在媒体查询中不被支持）、xs: '480'（无单位），Tailwind 会跳过解析
landscape / portrait 不是方向断点，只是普通 min-width
landscape: '768px' 在配置里只生成 @media (min-width: 768px)，和屏幕方向完全无关。它不会响应 orientation: landscape 条件。
真要匹配横屏，只有两种可靠方式：
- 手写媒体查询：在
src/index.css里加@media (min-width: 768px) and (orientation: landscape) { .landscape-lg\:hidden { display: none; } }，HTML 中用class="landscape-lg:hidden"（冒号需转义） - 用插件：安装
tailwindcss-orientation，它会自动注册portrait:和landscape:前缀，并生成带and (orientation: ...)的查询 - 注意：orientation 媒体查询在桌面浏览器基本无效，测试必须用真机或 Chrome Device Mode 的 Rotate 功能触发重绘
最常被忽略的其实是“单位必须显式写出”和“重启服务”这两步——写对了配置却忘了重启，或者用了 '480' 这种无单位值，新断点就永远进不了 CSS 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
