min-h-xx 类失效的根本原因是父容器缺乏可计算高度，导致子元素的 min-height 无参照扩展；需确保父级有 height 约束或处于 flex/viewport 等隐式撑开环境。
min-h-xx 类为什么没生效
常见现象是加了 min-h-screen 或 min-h-64，但元素高度还是塌缩成内容高度。根本原因不是类写错了，而是父容器没高度约束——CSS 的 min-height 依赖父级有可计算的高度（比如设置了 height，或父级本身受 viewport、flex 容器等隐式撑开）。如果父级是普通 div 且没设高度，子级的 min-h- 就会“失效”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否处于文档流中，且没有被
position: absolute或display: contents等破坏布局上下文 - 在 flex 布局中，父级需设
flex或flex-col，否则子级min-h-不会按预期扩展 - 用浏览器开发者工具看 computed height，确认父级 height 是否为
auto；若是，min-h-实际起效但“无处可扩”
min-h-screen 在移动端显示不全
min-h-screen 对应的是 viewport 的初始高度（100vh），但 iOS Safari 和部分安卓浏览器在地址栏收放时会动态改变 vh 值，导致元素突然截断或留白。这不是 Tailwind 的 bug，而是 CSS vh 单位本身的兼容性问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免在关键布局区域（如登录页全屏容器）单独依赖
min-h-screen - 改用
min-h-[100dvh]（推荐）：现代浏览器支持dvh（dynamic viewport height），能响应地址栏变化；Tailwind v3.3+ 默认启用，无需额外配置 - 降级方案：用 JS 监听
resize动态设置style.minHeight = window.innerHeight + 'px'，再配合min-h-0防止 Tailwind 覆盖
如何让 min-h 在 flex 布局里真正“顶满”
Flex 容器中，子元素设 min-h-full 通常不如预期——因为 full 指的是父级的 height，而 flex 子项默认不继承父级 height，只继承 block-size 行为。这时候 min-h-full 实际计算值是 0。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须显式设
h-full（或min-h-full），不能只靠flex或flex-col - 子元素若需“占满剩余空间”，优先用
flex-1，而非min-h-full；后者适合固定最小底线，前者才是 flex 的正确伸缩逻辑 - 组合使用更可靠：
flex flex-col h-screen（父） +flex-1 min-h-0（子）——min-h-0是为了防止内容少时 flex-1 不收缩到底
自定义 min-h 值时 class 名不生成
Tailwind 默认只生成预设的 min-h- 工具类（如 min-h-0 到 min-h-96、min-h-screen 等）。如果你写了 min-h-[300px] 却没效果，大概率是 JIT 模式未启用，或该值未出现在源码中被扫描到。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
content配置覆盖所有用到该类的文件路径，否则min-h-[300px]不会被生成 - 开发时可临时加
!min-h-[300px]强制输出（但上线前建议补进theme.extend.minHeight） - 更稳妥的做法是在
tailwind.config.js中扩展：module.exports = { theme: { extend: { minHeight: { '128': '32rem', 'screen-half': '50vh' } } } }然后直接用min-h-128或min-h-screen-half
最常被忽略的一点：min-h 是“最小高度”，不是“固定高度”。它只在内容不够高时起作用；一旦内容超过设定值，它就完全不干预——这点和很多人直觉相反，也导致大量调试时间花在“为什么没撑开”上，其实是因为内容早把容器顶高了。
