tailwind css 不支持 portrait: 或 landscape: 前缀，因其仅基于宽度断点且不解析 orientation 媒体查询；需用 @layer + @media 手动注入方向样式，并确保 viewport meta 标签存在以保障真机正常响应。
Tailwind CSS 本身不提供 portrait: 或 landscape: 这类基于屏幕方向的响应式前缀——它只按宽度断点（sm、md 等）工作，不监听 orientation 媒体查询。
为什么不能直接用 portrait:grid-cols-1 这类写法
Tailwind 的 JIT / AOT 构建器默认不解析 orientation 媒体特性，即使你手动在 tailwind.config.js 里加了自定义断点，CSSOM 层面也缺乏运行时方向变更的触发机制。浏览器中 @media (orientation: portrait) 是动态生效的（比如手机旋转时重排），但 Tailwind 工具类是静态生成的，无法自动绑定到该事件。
- 所有带前缀的工具类（如
md:flex-row）都编译为固定媒体查询，且仅基于min-width/max-width -
orientation查询无法被 Tailwind 的默认断点系统识别或注入 - 试图在配置中强行添加
orientation断点会导致构建失败，或生成无效 CSS
真正可行的替代方案：用原生 @layer + @media
你需要绕过工具类，用 Tailwind 的 @layer 机制注入方向相关的样式，并确保它和你的工具类共存。这是目前最稳定、兼容性最好的做法。
- 在
src/styles.css（或主 CSS 入口）中加入：
@layer utilities {
@media (orientation: portrait) {
.dir-portrait {
@apply flex-col;
}
}
@media (orientation: landscape) {
.dir-landscape {
@apply flex-row;
}
}
}
- 然后在 HTML 中使用：
<div class="flex dir-portrait md:dir-landscape"> <li>注意：不要混用 <code>portrait:前缀（它不存在），也不要依赖 JS 动态切换 class——@media是浏览器原生支持的，无需 JS 即可响应旋转 - 如果需要更细粒度控制（比如只在小屏下才区分方向），可以嵌套：
@media (max-width: 767px) and (orientation: portrait) - 必须有
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 不会触发 orientation 媒体查询 - iOS 15+ 和 Android Chrome 都支持
orientation媒体查询，但部分 WebView（如微信内置）可能降级为仅响应width，此时需 fallback 到断点逻辑 - 避免在
flex容器上同时用dir-portrait和flex-wrap—— 某些安卓版本下两者叠加会导致子项高度计算异常 - 如果布局含
aspect-video或h-screen，注意landscape下vh单位会变小（地址栏收起/展开影响），建议改用dvh（dynamic viewport height）
移动端真机调试时容易忽略的关键点
很多开发者在 Chrome DevTools 里切方向没问题，但真机上失效，原因往往不是代码，而是基础配置漏了。
方向切换不是 Tailwind 的“开箱即用”能力，它需要你主动补一层原生 CSS 媒体查询。别指望工具类覆盖所有场景——当遇到 orientation、prefers-reduced-motion 或 hover 这类运行时特性时，@layer 才是可靠接口。
