应避免混用 hidden 与响应式类（如 md:block），因其会导致断点下显示异常；推荐使用断点前缀控制显隐，或 alpine.js 的 x-show 实现安全切换，并通过 max-h-0 到 max-h-96 配合 transition 实现高度动画。
直接用 hidden 和 block 类切换显示状态，容易出问题——因为 hidden 是硬性隐藏（display: none），会覆盖后续所有断点下的显示声明，比如写成 hidden md:block，在大屏下可能依然不显示。
正确做法：用断点前缀控制显隐，不混用 hidden
Tailwind 的响应式类本身就能决定“何时显示、何时隐藏”，不需要额外加 hidden。
-
block表示默认（最小断点）下显示为块级元素 -
md:hidden表示从md断点起隐藏，小屏仍可见 -
sm:flex lg:hidden表示小屏起用 flex 布局，大屏时隐藏 - 顺序很重要：靠后的类权重更高，但逻辑要自洽，避免冲突
需要 JS 控制显隐时，别手动 toggle hidden
原生 JS 写 el.classList.toggle('hidden') 看似简单，但有隐患：
- 服务端渲染或构建流程中，
hidden类可能未被 Tailwind 扫描进最终 CSS，导致部署后失效 - 和响应式类（如
md:block）共存时，CSS 优先级混乱，小屏反而显示不出来 - 多个菜单共用同一段脚本，容易选错节点，状态错乱
推荐方案：用 Alpine.js 的 x-show
x-show 是更稳妥的选择，它内部用 display: none 切换，不依赖类名，也不干扰 Tailwind 的响应式逻辑。
- 给容器加
x-show="isOpen"和x-data="{ isOpen: false }" - 按钮绑定
@click="isOpen = !isOpen" - 必须配
x-cloak防闪烁：根元素加x-cloak，并在 CSS 中补充[x-cloak] { display: none; } - 需要动画就加
x-transition，不用自己写transition+opacity
要过渡动画？避开 height: auto
如果想让菜单展开有高度动画，不能用 hidden 切换，得靠 max-height：
- 初始状态设
max-h-0 overflow-hidden - 展开时切到
max-h-96（值要大于菜单最大高度） - 统一加
transition-all duration-300 ease-in-out - JS 只负责切换类名，不操作内联样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
