抽屉宽度应使用断点前缀组合的max-w类（如max-w-xs sm:max-w-md lg:max-w-lg）实现动态切换，避免w-类强制覆盖导致溢出；需用fixed+inset-y-0定位并配合z-index分层（抽屉z-50＞遮罩z-40＞主内容z-30），遮罩关闭逻辑须校验event.target确保不误触内部元素，动画应采用translate-x配合transition-transform与will-change-transform提升性能。
抽屉宽度在移动端和桌面端如何动态切换？
直接用 max-w-sm 或 w-64 无法响应式缩放——它只固定像素或断点内生效。正确做法是用 Tailwind 的断点前缀组合宽度类，让抽屉在小屏收窄、大屏展开：max-w-xs sm:max-w-md lg:max-w-lg。注意不要写成 sm:w-64 lg:w-80，因为 w- 类会强制覆盖自然流式行为，导致内容溢出或撑破容器。
抽屉如何脱离文档流又不影响主内容布局？
常见错误是给抽屉加 absolute 后忘了父容器设 relative，结果定位错乱；更隐蔽的问题是没处理 z-index 层级——抽屉必须高于主内容但低于遮罩层。推荐结构：
<div class="relative"> <div class="fixed inset-y-0 left-0 z-50 w-full max-w-xs sm:max-w-md lg:max-w-lg"></div> <div class="fixed inset-0 bg-black/50 z-40"></div> <main class="z-30">...</main> </div>其中
z-50（抽屉） > z-40（遮罩） > z-30（主内容），且所有 fixed 元素需明确 inset- 控制位置。
点击遮罩关闭抽屉时，如何避免误触内部链接？
遮罩层默认会拦截所有点击，但抽屉里的按钮、链接仍需响应。关键在于：遮罩层只负责关闭逻辑，不阻止子元素事件冒泡。所以必须给抽屉容器加 pointer-events-auto，而遮罩层保持 pointer-events-none（初始状态）→ 点击时触发关闭 → 再设为 pointer-events-auto（仅用于过渡）。实际中更稳妥的做法是监听遮罩 click 事件，然后检查 event.target === 遮罩DOM，再关闭——避免点击抽屉内部时触发关闭。
动画卡顿或闪屏怎么办？
Tailwind 默认的 transition 对 width 或 max-width 动画支持差，容易掉帧。改用 transform: translateX() 才是高性能方案：translate-x-0（展开）和 translate-x-full（收起），再配合 transition-transform duration-300 ease-in-out。同时务必加 will-change-transform 提示浏览器优化渲染。别忘了在移动端加 touch-action: pan-y 防止滑动冲突。
will-change-transform 和遮罩的 event.target 判断，这两处一错，体验就明显变差。 
