hidden类全局隐藏元素，不响应断点；需配合断点前缀如md:block实现响应式显示，但hidden与lg:block并用时小屏仍隐藏，正确写法是hidden md:block。
hidden类在Tailwind中默认作用于所有断点
直接写 hidden 就会让元素在所有屏幕尺寸下都不渲染，它不带任何断点前缀。这不是响应式隐藏，而是全局隐藏。如果你只想在小屏隐藏、大屏显示，必须配合断点前缀使用，比如 lg:hidden 或 md:block —— 但注意，lg:block 单独用是无效的，因为 Tailwind 的 display 工具类需要显式覆盖默认行为。
lg:block 不会自动取消 hidden，必须成对使用
常见错误是这样写：hidden lg:block。看起来合理，但实际在小屏下元素依然不可见，因为 hidden 设置了 display: none，而 lg:block 只在 ≥1024px 时生效，小屏下 hidden 仍起效。这本身没错，但容易误以为“加了 lg:block 就能自动响应”，其实它只是补了一个条件，并未撤销其他断点下的隐藏逻辑。
真正要实现“仅在大屏显示”，推荐写法是：
-
hidden md:block：小屏（ -
sm:hidden md:block：明确声明小屏隐藏、中屏显示，语义更清晰 - 避免只写
lg:block，它不会覆盖父级或前面的hidden，也不改变小屏状态
hidden 和 display 工具类的优先级与覆盖逻辑
Tailwind 按 HTML class 顺序应用样式，后写的 class 会覆盖同属性的前置 class。但 hidden 是独立工具类，生成的是 display: none !important（Tailwind v3+ 默认启用），所以普通 block 或 flex 类无法覆盖它，除非也带断点且位置靠后、或用 !block 强制覆盖。
安全做法是：
- 用断点前缀组合，如
sm:hidden md:block lg:block，让每个断点有明确定义 - 避免混用
hidden和无前缀的block，容易因加载顺序或 PurgeCSS 删除导致意外 - 检查 DevTools 中最终计算出的
display值，确认是否被!important锁死
非关键元素隐藏的实际取舍点
响应式隐藏不是单纯删 DOM，而是权衡内容可访问性、SEO 和性能。比如侧边栏导航、冗余图标、宽屏才需的装饰性 div —— 这些适合用 sm:hidden lg:block 控制；但不要对主标题、核心按钮、表单字段做类似操作，否则小屏用户会丢失关键功能。
还要注意：
- 被
hidden的元素仍存在于 DOM 中，屏幕阅读器默认跳过，若需保留可访问性，改用sr-only或invisible - 某些动画库或 JS 插件依赖元素存在，
hidden不影响 JS 获取元素，但display: none会导致offsetHeight为 0，可能触发意料外逻辑 - 移动端网络慢，隐藏非关键元素能减少重排重绘，但别为了“省一点”牺牲信息层级
真正难的不是怎么写 class，而是判断哪个元素算“非关键”——这得看用户路径、数据埋点和真实设备测试，不是光靠断点值决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
