移动端侧边栏自动收起需通过JS控制布尔状态isSidebarOpen，配合-translate-x-full（隐藏）与translate-x-0（展开）及transition-transform实现平滑动画，禁用hidden/invisible以防动画失效。
侧边菜单在移动端如何自动收起？
Tailwind 本身不提供 JavaScript 行为，所以「收起/展开」必须靠你自己控制一个布尔状态（比如 isSidebarOpen），再配合 translate-x-0 和 -translate-x-full 切换位移。别指望加个 class 就自动动起来——CSS 只负责样式，动效得靠 JS 触发。
常见错误是直接写 hidden 或 invisible，结果导致过渡动画失效。正确做法是用 transform + transition-transform：
<div class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out
{{ isSidebarOpen ? 'translate-x-0' : '-translate-x-full' }}">
<!-- 菜单内容 -->
</div>- 务必给父容器加
overflow-hidden（比如 body 或 layout wrapper），否则侧边栏滑出时可能撑破视口 - 移动端建议用
backdrop-blur-sm+ 半透背景增强层次感，但注意 iOS Safari 对backdrop-filter支持有限 - 如果用 React/Vue，记得在打开菜单时禁用 body 滚动（
document.body.style.overflow = 'hidden'），关闭时恢复
如何让菜单在桌面端固定、在移动端覆盖？
关键不是“响应式切换布局”，而是「同一套 DOM 在不同断点下表现不同」。Tailwind 的 md: 前缀就是干这个的，但要注意优先级和默认行为：
- 默认（无前缀）设为
fixed+translate-x-full（即初始隐藏） - 加
md:static md:translate-x-0：在中屏及以上变为静态定位、始终显示 - 加
md:w-64 md:shadow-none：桌面端去掉阴影、固定宽度；移动端保持全宽、带阴影
别漏掉 md:inset-y-0 md:left-0 —— 否则桌面端菜单可能错位或高度不足。Tailwind 的 inset- 类在响应式下不会自动继承，必须显式重写。
立即学习“前端免费学习笔记（深入）”；
点击遮罩层如何安全关闭菜单？
遮罩层（overlay）不是可选的装饰，而是防止用户误点背后内容的关键交互层。它的位置、层级和事件处理很容易出错：
- 遮罩必须放在菜单同级，且
z-40（比菜单z-50低一级），否则点不到 - 遮罩要覆盖整个视口：
fixed inset-0 bg-black/50，但不能写成h-screen w-screen（滚动长页面时会失效） - 关闭逻辑推荐用
event.target === event.currentTarget判断是否点在遮罩本身，而不是随便绑个click就close()—— 否则点菜单内部链接也会触发关闭
示例判断逻辑（Vue）：
<div @click="e => e.target === e.currentTarget && closeSidebar()"
class="fixed inset-0 bg-black/50 z-40 md:hidden"></div>菜单项 hover 和 focus 状态为什么在移动端不生效？
Tailwind 的 hover: 和 focus: 默认只在鼠标设备上激活。iOS 和 Android 上，首次点击会触发 :focus，但不会维持 :hover，导致视觉反馈丢失。
- 解决方案：加
group+group-hover:配合伪元素，或直接用data-[state=open]这类显式状态控制（需 JS 同步） - 更稳妥的做法是放弃纯 CSS 的 hover/focus，改用
aria-expanded+data-active属性，再通过[data-active] > a设置高亮样式 - 无障碍必须加
tabindex="0"到可交互菜单项，否则键盘用户无法聚焦
容易被忽略的一点：Tailwind 的 focus-visible 是现代方案，但需要启用插件并在 tailwind.config.js 中配置 focusRingOffset* 才能避免 Chrome/Firefox 下的双轮廓问题。
