移动端抽屉菜单需用fixed定位+translate-x类实现滑入滑出动画，配合transition-transform、遮罩层pointer-events隔离、aria属性控制状态及焦点管理确保可访问性。
抽屉菜单需要一个可切换的隐藏层和过渡动画
移动端抽屉菜单本质是「控制一个侧边容器的显示/隐藏 + 添加滑入滑出动画」，Tailwind 本身不提供 JavaScript 逻辑，但能用 transform、transition 和 translate-x 类快速实现视觉效果。关键不是“怎么写 CSS”，而是“怎么让 DOM 状态变化触发对应类名”——这通常靠 JS 切换元素的 class 列表。
- 抽屉默认应设为
fixed定位，脱离文档流，避免影响主内容布局 - 推荐用
left-0+translate-x-full隐藏（向左移出视口），用translate-x-0显现；右抽屉则用right-0+translate-x-full配合translate-x-0 - 必须加
transition-transform和duration-300，否则切换生硬；建议同时加ease-in-out - 遮罩层（overlay）要用
bg-black/50而非bg-gray-900 opacity-50，前者更可靠，后者在某些 Safari 版本中 opacity 不生效
用 aria-expanded 和 data-open 控制状态更稳妥
单纯靠 class 名（如 hidden / block）容易和响应式断点冲突；用属性驱动更清晰，也利于无障碍支持。比如点击按钮时，给抽屉容器添加 data-open="true"，再用 JS 动态增删 translate-x-0 和 translate-x-full。
- 不要依赖
hidden类做抽屉显隐：它会触发重排，且与transform动画不兼容 - 用
aria-expanded="true/false"同步更新按钮的 aria 属性，屏幕阅读器能感知状态变化 - 抽屉容器需设
role="dialog"和aria-modal="true"，否则键盘焦点可能逃逸 - 打开后建议用
document.body.classList.add('overflow-hidden')锁定背景滚动，关闭时再移除
移动端点击穿透问题必须处理
抽屉打开后，如果用户误点到背后的内容区域（尤其是 iOS Safari），有时会触发底层按钮或链接——这不是 Tailwind 的问题，而是 pointer-events 未隔离导致的。
- 遮罩层必须覆盖整个视口，且设
pointer-events-auto（默认），确保能拦截点击 - 抽屉内容区域要设
pointer-events-auto，否则内部按钮点不动 - 遮罩层下方的主内容区，建议加
pointer-events-none（仅当抽屉打开时），比单纯靠 z-index 更可靠 - 别用
z-index: 9999这种魔法数字；用 Tailwind 的z-50（遮罩）、z-50（抽屉）、z-0（主内容）分层即可
示例结构：HTML + 少量 JS 就够用
下面是一个最小可行结构，不依赖框架，纯原生 JS：
立即学习“前端免费学习笔记（深入）”；
<button id="menu-toggle" aria-expanded="false" aria-controls="mobile-menu"> Menu </button> <div id="mobile-menu" role="dialog" aria-modal="true" aria-labelledby="menu-toggle" class="fixed inset-y-0 left-0 z-50 w-64 bg-white transform -translate-x-full transition-transform duration-300 ease-in-out"> <nav><a href="#">Home</a></nav> </div> <div id="overlay" class="fixed inset-0 bg-black/50 z-40 hidden"></div>
JS 只需三件事：切换 data-open 属性、切换 class、控制 body 滚动。重点是别在抽屉上写 hidden 或 opacity-0 ——这些和 transform 动画混用容易卡顿或失效。
最常被忽略的是焦点管理：抽屉打开后，第一个可聚焦元素（比如第一个 <a>）应该自动 focus()；关闭时焦点要回到触发按钮。这点没做，对键盘用户就是不可用的。
