应使用 block lg:hidden 而非 hidden lg:hidden，因后者全局隐藏；需确认 lg 断点是否匹配目标 pc 宽度（如 992px），并注意可访问性与布局影响。
直接用 hidden lg:hidden 不行——这会让元素在所有尺寸下都隐藏，PC端（通常指 ≥992px）根本不会显示。真正有效的做法是「默认显示，只在 PC 端隐藏」，即用断点类明确覆盖。
为什么 hidden lg:hidden 会失效
因为 hidden 是全局生效的 display: none，lg:hidden 只在 ≥992px 时加一层 display: none，两者叠加结果仍是隐藏。它不是“条件切换”，而是“层层叠加”。Tailwind 的断点类不自动取消低断点行为，必须靠显式声明“默认状态”。
-
hidden→ 所有屏幕尺寸下display: none -
lg:hidden→ 仅 ≥992px 下display: none，但小屏仍受hidden控制 - 想让 PC 端隐藏、移动端显示，得写成：
block lg:hidden或flex lg:hidden
block lg:hidden 是最简可靠的写法
它表达的是：「默认以 block 显示，仅在 lg 及以上断点应用 hidden」。这是 Tailwind 响应式机制的设计原意——断点类是“增强型修饰”，不是“开关式互斥”。
- 适用于普通块级容器：
<div class="block lg:hidden">仅手机可见</div> - 若容器本身是 flex 布局，用
flex lg:hidden更准确，避免 display 类型冲突 - 不要混用
hidden md:block lg:hidden：md 和 lg 断点重叠，且语义混乱，容易因 JIT 编译顺序出错
注意 PC 端断点的实际取值
Tailwind 默认 lg 是 1024px，但很多项目把 PC 端定义为 ≥992px（Bootstrap 风格），这时不能硬套 lg:hidden。需检查 tailwind.config.js 中的 theme.screens 配置：
module.exports = {
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '992px', // ← 若改为此值，则 lg:hidden 确实对应 PC 端
xl: '1200px',
}
}
}
- 若未自定义，
lg默认为1024px，此时想覆盖 ≥992px 应用lg:hidden就会漏掉 992–1023px 区间 - 更稳妥的方式是用
xl:hidden（默认 1280px）配合自定义断点，或直接加媒体查询：@media (min-width: 992px) { .hide-on-pc { display: none; } }
隐藏后要考虑可访问性与布局塌陷
lg:hidden 本质是 display: none，它会从 DOM 流中完全移除元素，影响：
- 屏幕阅读器无法读取该内容，如需保留语义，应同时加
aria-hidden="true"或改用opacity-0 lg:opacity-100+pointer-events-none lg:pointer-events-auto - 父容器若依赖子元素撑高（比如 flex 布局中唯一子项），隐藏后可能导致高度坍缩，此时需补
lg:min-h-[some-value]或改用invisible lg:visible（仅视觉隐藏） - 动画不支持：
hidden类无法过渡，lg:hidden同理；需要淡入/滑出效果得用opacity和transform配合transition
真正难的不是写对类名，而是确认「PC 端」具体指哪一段宽度、是否要兼容 992–1023px 这个模糊区间，以及隐藏后是否破坏了无障碍或布局逻辑——这些细节不查配置、不测真机，光靠类名堆砌很容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
