纯CSS响应式侧边栏必须用checkbox作状态源，通过peer/peer-checked控制translate-x和opacity动画；结构须input→button→aside同级相邻，input用sr-only隐藏，移动端默认-translate-x-full opacity-0，桌面端用lg:translate-x-0强制重置。
纯 CSS 实现响应式侧边栏，必须用 做状态源，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 流的场景（如桌面端汉堡按钮），不适用于需要动画的侧边栏容器 - 侧边栏动画必须用
transform+transition-transform，不能用max-h-0或opacity单独控制
结构必须严格满足 peer 同级相邻前置
peer 不是魔法，它只对紧邻的兄弟元素生效。侧边栏要响应汉堡按钮点击，结构顺序必须是： → → ，三者平级且 在最前。
常见错误包括：
- 把
放进内部，或嵌套在里——这会让peer-checked完全失效 -
没带id，或的for属性没精确匹配该id - 用
hidden或display: none隐藏——应改用sr-only，否则屏幕阅读器无法识别其状态
移动端滑入 + 桌面端常驻的关键类组合
核心是位移 + 透明度双控，且过渡必须写在侧边栏自身上：
- 移动端默认：
-translate-x-full opacity-0 - 勾选后：
peer-checked:translate-x-0 peer-checked:opacity-100 - 必须显式加：
transition-transform duration-300 ease-in-out和transition-opacity，缺一不可 - iOS Safari 有渲染闪动问题，可加
will-change: transform, opacity优化 - 桌面端必须强制重置：
lg:translate-x-0 lg:opacity-100 lg:static，否则缩放窗口从移动端切到桌面端时，仍保持勾选，侧边栏会卡在展开态
若侧边栏需固定宽度（如 w-64），必须配合 fixed 或 absolute 定位，否则 translate-x-full 基准错乱。
fixed 侧边栏高度与滚动适配
当顶部有固定导航栏（比如高 63px）时，h-full 在 fixed 上下文中不可靠——它继承的是父容器高度，而 fixed 元素已脱离文档流，父容器往往无明确高度约束，导致 overflow-y-auto 形同虚设。
正确解法是显式计算可用高度：
- 用
h-[calc(100vh-63px)]替代h-full -
63px必须与导航栏实际高度严格一致；若导航栏高度响应式变化（如sm:h-[72px]），需同步加sm:h-[calc(100vh-72px)] - 别漏掉
top-[63px] left-0和z-40，否则会被内容遮挡或定位偏移
真正麻烦的不是加几个类，而是 fixed 侧边栏和主内容区之间的空间让渡、滚动边界、层级覆盖——这些细节一旦忽略，就会在 iOS 或低配安卓机上暴露得格外明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
