抽屉默认隐藏必须用 translate-x-full 而非 translate-x-96，因其相对父容器宽度计算，确保完全移出右侧；需配合 inset-y-0 right-0 和固定宽类（如 w-64），并用 opacity-0 translate-x-full visible 初始状态+显式 transition-transform/opacity 控制动画；响应式需分层处理结构、动画与 backdrop，避免事件冒泡和键盘关闭遗漏。
抽屉默认隐藏时必须用 translate-x-full 而不是 translate-x-96
直接写死 translate-x-96 看似能移出屏幕，但不同设备视口宽度差异大，96 在小屏可能没完全隐藏，在大屏又留白过多。Tailwind 的 translate-x-full 是相对父容器宽度计算的，真正保证“完全移出右侧”。同时要配合 inset-y-0 right-0 和 w-64（或 sm:w-80）等固定尺寸类，否则 translate 无参照基准。
进场动画需同时控制 transform 和 opacity，且不能只靠 transition
Tailwind 默认的 transition 只作用于可动画属性，但若抽屉初始状态是 hidden 或 invisible，元素不参与渲染或不可见，transform 动画会跳过。正确做法是：
- 初始状态用
opacity-0 translate-x-full+visible（确保 DOM 渲染且占位） - 触发时移除
opacity-0、添加opacity-100，并移除translate-x-full（即变成translate-x-0） - 必须显式声明过渡：加
transition-transform duration-300 ease-in-out控制位移，再加transition-opacity duration-200—— 两个 transition 不合并，否则 opacity 会被 transform 的 timing function 干扰
响应式断点要分层控制宽度和触发逻辑，别只改 w- 类
比如希望移动端全屏抽屉、桌面端固定宽 28rem 并带 backdrop，不能只写 sm:w-72 md:w-72。实际需要：
- 结构上：用
sm:hidden隐藏桌面端的汉堡按钮，用sm:block显示常驻侧边栏；抽屉本身加sm:translate-x-0 sm:static让它在桌面“取消抽屉态” - 动画上：桌面端不需要进场动画，可直接移除
transition类；移动端保留transition-transform - backdrop：用
fixed inset-0 bg-black/50+sm:hidden，确保只在移动端遮罩，且 backdrop 必须在抽屉同级、z-index 比抽屉低
点击 backdrop 关闭时，注意事件冒泡导致抽屉闪一下再关
常见错误是给 backdrop 绑定 onclick="closeDrawer()"，但抽屉内容区域如果也监听了 click（比如按钮），事件冒泡到 backdrop 就会重复触发关闭逻辑。解决方式：
- 抽屉内容区域加
onclick="event.stopPropagation()"（或 Vue/React 中用@click.stop） - 更稳妥的是：backdrop 元素设为
pointer-events-auto，抽屉容器设为pointer-events-none，再在抽屉内部所有可交互子元素上单独加pointer-events-auto—— 这样 backdrop 可点击，抽屉整体不拦截事件，避免误触 - 别忘了键盘关闭支持：监听
Escape键，且焦点要在抽屉内时才生效（用document.activeElement.closest('[data-drawer]')判断）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
