纯 CSS 响应式侧边栏必须用 checkbox + peer/peer-checked 控制显隐，禁用 hidden 因其破坏动画且响应式冲突；应使用 translate-x-full/-[100vw] 位移配合 opacity 和 transition-transform 实现平滑过渡，并确保 HTML 结构严格满足 peer 相邻前置要求。
纯 CSS 实现响应式侧边栏，必须用 <input type="checkbox"> 作状态源，peer 和 peer-checked 控制显隐——Tailwind 本身不处理点击逻辑，硬加 onclick 或直接操作 hidden 类会破坏样式链。
为什么不能直接用 hidden + md:block 控制侧边栏
hidden 是 display: none，而 md:block 只在中屏生效，两者无覆盖关系。小屏时 hidden 生效；中屏时两个类共存，最终是否显示取决于 JIT 编译顺序或 CSS 权重，不可控。更糟的是：hidden 会中断所有过渡动画（transition 对 display 无效），导致侧边栏“闪现”或无法滑入。
正确做法是：
- 移动端默认用
translate-x-full移出视口 - 桌面端用
lg:translate-x-0回位 -
hidden只用于彻底移除 DOM 流的场景（如桌面端汉堡按钮），不适用于需要动画的侧边栏容器
侧边栏必须用 translate-x-full 而非 translate-x-[-100%]
百分比值（%）依赖父容器宽度计算，而侧边栏通常是 position: fixed，父容器往往没设宽，导致偏移不准；100vw 是视口单位更可靠。Tailwind 的 translate-x-full 编译为 transform: translateX(100%)，但实际生效仍受上下文影响。
立即学习“前端免费学习笔记（深入）”；
右抽屉推荐显式写 translate-x-[100vw]（方括号绕过预设限制），左抽屉用 translate-x-[-100vw]：
- 初始隐藏状态：右抽屉加
translate-x-full，左抽屉加-translate-x-full - 打开状态统一用
translate-x-0，别写translate-x-[0px]——后者不触发硬件加速 - 如果用了
sm:translate-x-full响应式类，记得在桌面断点里覆盖掉：@media (min-width: 640px) { .sidebar { transform: translateX(0); transition: none; } }
peer 结构必须严格满足“同级、相邻、前置”
peer 不是魔法，它只对紧邻的兄弟元素生效。侧边栏要响应汉堡按钮点击，结构顺序必须是：<input> → <button> → <aside>，三者平级且 <input> 在最前。
-
<input>必须带id，<button>的for属性必须精确匹配该id - 不能把
<input>放进<button>内部，也不能嵌套在<aside>里——这会让peer-checked完全失效 -
<input>需用sr-only（而非hidden或display: none）隐藏，否则屏幕阅读器无法识别其状态
动画必须用 transform + transition-transform 双控
用 max-h-0/max-h-96 做下拉动画在侧边栏场景容易高度计算错误；用 opacity 单独控制又会有视觉残留。最稳方案是位移 + 透明度双控，且过渡必须写在侧边栏元素自身上。
- 勾选后：
peer-checked:translate-x-0和peer-checked:opacity-100，缺一不可 -
transition-transform必须配初始transform值：只写transition-transform不生效——浏览器需要明确的起始transform才能插值 - 侧边栏容器必须带初始位移类，例如：
fixed top-0 left-0 h-screen w-64 -translate-x-full transition-transform duration-300 ease-in-out - 别只写
transition或transition-all：transition默认包含所有属性，transition-all会意外过渡opacity或scale，拖慢性能
真正难的不是写对类名，而是让 <input> 的状态与用户预期一致：点击按钮必须触发勾选、按 Esc 要收起、路由跳转后要自动关闭——这些都超出纯 CSS 能力边界，该加轻量 JS 时别硬扛。
