tailwind 的 screens 配置不支持 orientation，landscape: '768px' 仅定义最小宽度断点，生成 @media (min-width: 768px)，与屏幕方向无关；需手动写 @media (min-width: 768px) and (orientation: landscape) 或使用 tailwindcss-orientation 插件，并注意真机测试。
不能直接用 Tailwind 的 screens 配置“横屏/竖屏”断点——它只支持 min-width（或 max-width）媒体查询，不解析 orientation。想响应屏幕方向，得手动写媒体查询或加插件。
为什么 landscape: '768px' 不等于横屏检测
这是最常被误解的一点：landscape: '768px' 在 tailwind.config.js 里只是定义了一个名为 landscape 的最小宽度断点，最终生成的是 @media (min-width: 768px)，和设备方向完全无关。
- 它不会自动加
and (orientation: landscape) - 类名如
landscape:text-right实际只在视口宽度 ≥768px 时生效，无论手机是横着还是竖着 - 真要匹配横屏，浏览器必须同时满足两个条件：宽度达标 且 方向为 landscape
手动写 @media 是最可靠的方式
Tailwind 允许你在 CSS 文件中直接写原生媒体查询，它会保留并注入到最终样式中。这是目前适配方向最可控的做法：
- 在
src/styles.css或全局 CSS 文件里写：@media (min-width: 768px) and (orientation: landscape) { .landscape-lg\:hidden { display: none; } } - 然后在 HTML 中使用
class="landscape-lg:hidden"（注意冒号要转义） - 如果用 PostCSS，确保
tailwindcss()插件在postcss.config.js中排在autoprefixer之前，否则and (orientation: ...)可能被误删
用插件替代手写（适合多处复用）
如果你需要多个方向相关类（比如 portrait:w-full、landscape:grid-cols-2），推荐用社区插件，例如 tailwindcss-orientation：
- 安装：
npm install tailwindcss-orientation - 在
tailwind.config.js的plugins数组里加入：require('tailwindcss-orientation') - 它会自动注册
portrait:和landscape:前缀，生成带orientation条件的媒体查询 - 注意：插件生成的类仍需在模板中真实出现，否则 PurgeCSS 会剔除；调试时务必关掉 DevTools 设备模拟器，否则
window.innerWidth和实际渲染宽度不一致
真正容易被忽略的是：哪怕用了插件或手写媒体查询，orientation 在桌面浏览器里基本无效——它只对移动设备或支持 screen.orientation API 的环境有意义。测试横屏逻辑，必须真机访问或用 Chrome 的「Device Mode」+「Rotate」按钮触发重绘，不能只靠缩放窗口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
