抽屉侧边栏需用 transform 位移+显式过渡控制动画，因 hidden+媒体查询会导致闪卡、不响应、无硬件加速；推荐 translate-x-[100vw]（右）或 -translate-x-[100vw]（左），配合 inset-y-0 和固定宽，并显式声明起始 transform 与 transition-transform 才生效。
抽屉侧边栏在 Tailwind CSS 中不能靠 hidden + 媒体查询“硬切”，必须用 transform 位移 + 显式过渡控制动画起点和终点，否则会闪、卡、不响应、无法硬件加速。
为什么 translate-x-full 比 translate-x-96 或 translate-x-[-100%] 更可靠
直接写死 translate-x-96 在小屏可能没完全移出，大屏又留白过多；translate-x-[-100%] 依赖父容器宽度计算，而抽屉通常是 position: fixed，父容器往往没设宽，导致偏移失效。真正可控的是视口单位：
-
translate-x-full编译为transform: translateX(100%)，但实际效果仍受上下文影响 - 右抽屉推荐显式写
translate-x-[100vw]（方括号绕过预设限制），左抽屉用-translate-x-[100vw] - 务必配合
inset-y-0 right-0（右抽屉）或inset-y-0 left-0（左抽屉）和固定宽类如w-64，否则translate无参照基准
初始状态与 transition-transform 必须成对出现
只加 transition-transform 不生效——浏览器需要明确的起始 transform 值才能插值。哪怕起始是 0，也得显式写出：
- 抽屉容器默认必须带位移类，例如：
fixed top-0 right-0 h-screen w-64 translate-x-full transition-transform duration-300 ease-in-out - 别只写
transition或transition-all：前者默认包含所有属性，后者会意外过渡opacity或scale，拖慢性能 - 动画曲线建议用
ease-in-out或自定义cubic-bezier(.25,.46,.45,.94)，比linear更自然
响应式断点要分层控制结构、动画与 backdrop
不能只改 w- 类，否则桌面端抽屉仍保留位移逻辑，造成布局错乱：
- 结构上：移动端用
sm:hidden隐藏常驻侧边栏，桌面端用lg:translate-x-0 lg:static让抽屉“取消抽屉态” - 动画上：桌面端可直接移除
transition-transform类，避免无谓过渡 - 遮罩层用
fixed inset-0 bg-black/50 sm:hidden，确保只在移动端显示；且必须与抽屉同级、z-index比抽屉低（如z-40vsz-50） - 点击遮罩关闭时，注意事件冒泡：抽屉内容区域需加
onclick="event.stopPropagation()"，或更稳妥地将遮罩设为<label for="drawer-toggle"></label>关联 checkbox
滚动与高度计算容易被忽略的细节
当侧边栏有固定头部（比如 top-[63px]）时，overflow-y-auto 往往不生效——因为 h-full 在 fixed 上下文中继承的是脱离文档流后的父高，常为 0：
- 正确做法是显式计算可用高度：
h-[calc(100vh-63px)] - 若用 checkbox 控制状态，
<input>必须前置、同级、带id，且用sr-only隐藏（不可用hidden或display: none），否则屏幕阅读器无法识别 -
will-change: transform只应在动画过程中启用（如通过 class 切换控制），长期开启有内存泄漏风险
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
