不能直接用 hidden + transition 控制手风琴高度，因为 hidden 是 display 硬切换，h-0 与 h-auto 不可插值；需用 max-height 配合 overflow-hidden 实现平滑过渡，且必须显式写 transition-max-height。
为什么不能直接用 hidden + transition 控制手风琴高度？
因为 Tailwind 默认不支持对 height 的过渡动画——hidden 是 display 层面的硬切换，h-0 和 h-auto 无法插值动画。强行加 transition-all 会失效或跳变。
真正能动的是 max-height：它可被浏览器插值，且配合 overflow-hidden 能模拟“收起”效果。
- 设一个足够大的
max-h-[500px]（覆盖内容最大高度），展开时用max-h-[500px]，收起时用max-h-0 - 必须配
overflow-hidden，否则内容会溢出 - 过渡要写全：
transition-max-height duration-300 ease-in-out，只写transition不生效
如何用单个 checkbox 实现无 JS 手风琴？
Tailwind 本身不提供交互逻辑，但可以借助原生 <input type="checkbox"> + :checked 伪类 + 相邻兄弟选择器（~）驱动样式切换，完全零 JS。
- 把
<input>放在标题前，用absolute opacity-0隐藏但保留可访问性 - 标题用
label包裹，for指向 input 的id，点击即触发勾选 - 折叠内容放在 input 后面，用
input:checked ~ .accordion-content控制max-h和opacity - 注意 DOM 顺序：input → label（标题）→ .accordion-content，否则
~无法命中
group + group-data-[open] 在 v4 中更简洁？
Tailwind v4（实验性）引入了 data-[open] 属性匹配和 group 作用域，比 checkbox 更语义化，但需启用 experimental.optimizeUniversalDefaults 并手动添加插件。
立即学习“前端免费学习笔记（深入）”；
- HTML 中用
<div class="group" data-open="false">包裹整个手风琴项 - 标题按钮加
onclick="this.parentElement.dataset.open = this.parentElement.dataset.open === 'true' ? 'false' : 'true'"（仍需极简 JS） - CSS 层面：用
group-data-[open=true]:max-h-[500px]替代 checkbox 的复杂选择器 - 目前稳定项目建议坚持 checkbox 方案；v4 方案适合新项目且接受实验性特性
折叠内容内有 padding/margin 时动画卡顿怎么办？
过渡只作用于 max-height，但内部元素的 padding、margin、border 会突然出现，造成视觉跳动。
- 统一把内边距移到外层容器（如
.accordion-content上），内容区用p-0 m-0 - 给
.accordion-content加pt-0 pb-0，然后用group-data-[open=true]:pb-4或input:checked ~ .accordion-content:pb-4动态加底部间距 - 避免在折叠区用
mt-4这类上边距——它会在展开瞬间弹出，破坏动画连贯性
实际最稳的方案还是 checkbox + max-h-0/max-h-[500px]，尤其当需要服务端渲染或禁用 JS 的环境。v4 的 data-* 方案看着干净，但多了一层运行时依赖和配置成本。
