max-height 动画无效的根本原因是 CSS 不支持 auto 参与过渡，必须用足够大的固定值（如 500px）配合 overflow-hidden 和精确的 :checked 选择器链实现平滑折叠。
直接用 max-height: 0 → max-height: auto 做 transition 是无效的，浏览器不支持 auto 参与动画。必须用足够大的固定值兜底，再配合 overflow-hidden 和精确的选择器链。
为什么 max-height 动画总是一卡一跳
根本原因不是 Tailwind 的问题，而是 CSS 动画机制限制：max-height 只能从一个具体数值过渡到另一个具体数值。写成 max-h-0 → max-h-auto 不会动，因为 auto 不是可计算的长度；写成 max-h-0 → max-h-[600px] 又容易截断或留白——内容高度变了，预设值就失效。
常见现象包括：
- 点击后内容“啪”一下弹出，毫无过渡
- 收起时文字被裁掉一半，或底部留大片空白
- 移动端点不动，DevTools 里手动勾选
checkbox却能生效
真正安全的做法是：用一个远大于内容实际高度的值（比如 max-h-[500px]），并确保该值在所有可能内容长度下都够用；同时永远带上 overflow-hidden。
立即学习“前端免费学习笔记（深入）”；
如何写对 checkbox + label 的选择器链
纯 CSS 折叠面板依赖 :checked 状态触发兄弟元素样式变更，但 DOM 结构稍有偏差就会断链。最常出问题的是：
-
label的for属性和input的id拼写不一致（大小写、连字符、空格） - 中间插入了注释、换行符或文本节点，导致
~（通用兄弟）无法匹配 - 在 React/Vue 中混用受控组件（如
v-model或useState）却没移除原生input，造成状态冲突
调试建议：打开 DevTools，在 Elements 面板里手动勾选 input[type="checkbox"]，看目标 div 是否立刻获得 max-h-[500px] 类；若没反应，说明选择器没命中。
Tailwind 中必须加的三个类
缺一不可，顺序无关，但逻辑上要共存：
-
max-h-0：初始折叠态，高度视觉归零 -
overflow-hidden：必须始终存在，不能只在折叠时加；否则动画中内容会溢出容器 -
transition-all duration-300 ease-in-out：比只写transition-max-height更稳——因为实际还涉及padding、opacity等隐式变化，transition-all能兜住
示例结构（无 JS）：
<input type="checkbox" id="faq-1" class="hidden">
<label for="faq-1" class="cursor-pointer">Q: 问题标题</label>
<div class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
<p class="text-gray-600 p-4">A: 这是答案内容</p>
</div>
<style>
#faq-1:checked ~ div { @apply max-h-[500px]; }
</style>
移动端点击无响应？先查这三件事
不是 Tailwind 不兼容，而是移动端事件穿透或布局干扰更敏感：
- 检查
label是否被pointer-events: none或z-index层级压住 - 确认父容器没设
touch-action: pan-y（常见于滚动容器），它会阻止默认点击行为 - 如果用了
min-h-screen或h-screen，注意 iOS Safari 对100vh的解析偏差——改用min-h-[100dvh]（Tailwind v3.3+ 支持）更可靠
最隐蔽的问题是：内容区域内部有 margin 或 border，导致 max-h-0 下仍露头。此时别调 max-h-0，而是在展开态统一用 p-4 控制内边距，折叠态靠 overflow-hidden 吃掉溢出部分。
