Tailwind CSS 没有内置 collapse 类，因其原子化设计不封装 JS 行为，且 height: 0 → auto 无法平滑过渡；常用方案包括 max-height 估算、scaleY 缩放或 JS 测量 scrollHeight 实现真实高度动画。
Tailwind CSS 本身没有内置的 collapse 类，也不存在官方支持的“折叠侧边栏菜单”的 CSS 类；所谓 “Tailwind Collapse” 是常见误解，实际必须靠手动控制元素显隐 + 过渡动画实现。
为什么 Tailwind 没有 collapse 类？
Tailwind 是原子化 CSS 框架，不提供 JavaScript 行为或状态封装（比如展开/收起逻辑），也不内置 DOM 节点高度动画 —— 因为高度过渡（height: 0 → auto）无法被 CSS 直接平滑过渡。浏览器不支持 auto 值的过渡动画。
-
height: 0和height: auto之间不能用transition平滑过渡 - Tailwind 的
max-h-0、h-0、opacity-0等类只能做“硬切”，无高度渐变效果 - 真折叠动画需 JS 测量高度，或改用
transform: scaleY()/max-height逼近方案
用 max-h-0 + overflow-hidden 模拟折叠（最简方案）
适用于菜单项数量固定、最大高度可预估的场景。核心是用 max-height 替代 height，并设一个足够大的上限值（如 max-h-[200px]），再配合 transition-max-h。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="transition-max-h duration-300 ease-in-out overflow-hidden"> <div class="p-2">菜单项 1</div> <div class="p-2">菜单项 2</div> <div class="p-2">菜单项 3</div> </div>
折叠时加：max-h-0；展开时加：max-h-[200px]（注意：该值必须 ≥ 内容真实高度，否则会截断）
- 不依赖 JS 测量，但需人工估算最大高度
- 若菜单动态增减项，
max-h-[200px]可能不够或冗余，导致动画卡顿或留白 - Tailwind 默认不启用
max-h过渡，需在tailwind.config.js中显式添加：transitionProperty: { 'max-height': 'max-height' }
用 scaleY(0) 实现视觉折叠（无高度计算）
绕过高度过渡限制，对容器使用 transform: scaleY() 缩放，配合 origin-top 实现“从上往下收起”效果，性能更好且无需预估高度。
关键类组合：
- 折叠态：
scale-y-0 origin-top overflow-hidden - 展开态：
scale-y-100 - 过渡：
transition-transform duration-200 ease-in-out
注意：scaleY(0) 会让子元素不可交互（指针事件仍触发），如需禁用点击，额外加 pointer-events-none；恢复时加 pointer-events-auto。
真正可靠的做法：用 height + JS 测量（推荐生产环境）
当菜单内容动态、层级嵌套或需精确动画时，CSS-only 方案都会妥协。此时应交由 JS 控制：
- 点击菜单标题时，调用
element.scrollHeight获取真实高度 - 先移除
height设置，让元素自然撑开，读取scrollHeight - 再设置
style.height = '0'，触发重排，接着setTimeout后设style.height = ${scrollHeight}px - Tailwind 只负责基础过渡：
transition-height duration-300（需在 config 中启用height过渡）
这方法兼容所有内容形态，但意味着你必须写几行 JS —— Tailwind 不替你做这件事，也没打算做。
折叠动画的复杂点不在样式类拼写，而在于高度是否可预测、内容是否动态、以及是否接受 scaleY 的视觉失真。选哪种方案，取决于你愿不愿意为“看起来更顺”多写 10 行 JS。
