纯 CSS 响应式侧边栏须用 checkbox 作状态源，通过 peer/peer-checked 控制 translate-x 和 opacity 动画；结构需 input→button→aside 同级相邻，input 用 sr-only 隐藏；移动端移出视口并透明，桌面端断点强制重置样式。
纯 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 流的场景（如桌面端汉堡按钮），不适用于需要动画的侧边栏容器 - 若侧边栏需固定宽度（如
w-64），必须配合absolute或fixed定位，否则translate-x-full基准错乱
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 单独控制又会有视觉残留。最稳方案是位移 + 透明度双控，且过渡必须写在侧边栏元素自身上。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 移动端默认：
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优化
桌面端必须显式重置状态，不能依赖 peer
peer-checked 是纯 CSS 状态，缩放窗口从移动端切到桌面端时，<input> 仍保持勾选，侧边栏会卡在展开态。你得用断点类强制覆盖：
- 侧边栏加
lg:translate-x-0 lg:opacity-100 lg:static - 同时加
lg:w-64（固定宽度）和lg:z-0（避免遮挡主内容） - 汉堡按钮本身要用
lg:hidden，确保桌面端不出现 - 如果侧边栏含链接，记得加
focus:outline-none focus:ring-2 focus:ring-blue-500，否则键盘用户 Tab 时焦点不可见
真正难的不是写对类名，而是让 <input> 的状态与用户预期一致：点击按钮必须触发勾选、按 Esc 要收起、路由跳转后要自动关闭——这些都超出纯 CSS 能力边界，该加轻量 JS 时别硬扛。
