md:hidden 在小屏幕不生效是因为它仅在视口宽度 ≥ 768px（中等及以上断点）时隐藏元素，小屏下默认显示；其本质是 min-width 媒体查询逻辑，非“仅限该尺寸”，且 hidden 类编译为 display: none，完全脱离文档流。
md:hidden 为什么在小屏幕上没生效
因为 md:hidden 只在「中等及以上断点」（即视口宽度 ≥ 768px）才起作用，它不会隐藏小屏幕（比如手机）上的元素——恰恰相反，它会让元素在小屏「显示」，只在中屏及以上「隐藏」。这是初学者最常误解的一点。
常见错误现象：md:hidden 加了，但 iPhone 上元素还是看得见，以为是 Tailwind 没加载或 class 写错。
- 确认你真正想实现的是「仅在小屏隐藏」还是「仅在大屏显示」
- 如果目标是「手机上不显示，平板起才显示」，该用
sm:hidden lg:block或更稳妥的hidden sm:block lg:block - Tailwind 的断点是 min-width 逻辑：每个响应式前缀（如
md:）代表「从该尺寸开始应用」，不是「仅限该尺寸」
lg:block 和 block 的区别在哪
block 是无条件强制设为块级元素，而 lg:block 只在视口 ≥ 1024px 时才设为 display: block；更关键的是，它不会覆盖其他断点下的 display 值——比如你同时写了 md:hidden lg:block，那在 md 断点下仍是 display: none，到 lg 才切回 block。
使用场景：侧边栏导航在桌面显示为垂直菜单（lg:block），在移动端收起为汉堡按钮（lg:hidden）。
立即学习“前端免费学习笔记（深入）”；
- 多个响应式工具类会按断点顺序叠加，后写的不覆盖前面的，而是按媒体查询条件分别生效
- 避免混用冲突类，例如
hidden lg:block是安全的（hidden全局设display: none，lg:block在 lg+ 覆盖它），但sm:block md:hidden在 sm–md 区间行为可能反直觉 - 查看生成的 CSS，你会发现 Tailwind 为每个响应式类生成独立 @media 规则，没有“继承”或“优先级覆盖”概念
响应式隐藏后，元素还占布局空间吗
不占。hidden、sm:hidden 等所有带 hidden 的工具类，最终都编译为 display: none，元素完全脱离文档流，不占位置、不触发重排、无法被聚焦或访问。
容易踩的坑：有人想“视觉隐藏但保留可访问性”，误用 hidden 导致屏幕阅读器也读不到；或者想“隐藏但留白”，结果发现空白也没了。
- 需要视觉隐藏但保持语义和可访问性？改用
sr-only（对齐到左上角 + 尺寸归零 + overflow hidden） - 需要留白？用
opacity-0 pointer-events-none配合固定高度/宽，或用invisible（Tailwind v3.3+ 新增，对应visibility: hidden） -
hidden类无法通过 JavaScript 的offsetHeight或getBoundingClientRect()获取尺寸，因为它已被移出渲染树
自定义断点后，md:hidden 还能用吗
能，但含义变了。Tailwind 的 md: 前缀绑定的是你在 tailwind.config.js 中定义的 theme.screens.md 对应的最小宽度值，不是固定 768px。
如果你把 md 改成 600px，那 md:hidden 就会在 ≥ 600px 时隐藏元素，和原来的行为完全不同。
- 检查配置文件里的
screens，确认各断点数值是否符合预期（尤其是团队协作时，不同人本地 config 不一致会导致响应式表现不一致） - 不要依赖“md 就是平板”，生产环境建议用语义化别名（如
tablet:hidden）并显式声明断点值 - 修改断点后，所有已用的
md:类仍有效，但行为迁移需同步评估，尤其涉及复杂嵌套响应式逻辑时
响应式类不是魔法，它们只是按预设条件批量生成 CSS 媒体查询。真正容易被忽略的，是断点定义与实际设备尺寸之间的错位，以及 display: none 带来的 DOM 渲染链断裂——这两点一旦出问题，调试起来比 JS 错误还难定位。
