移动端侧边栏用 translate-x-0/translate-x-full 配合 fixed inset-y-0 right-0、z-50 和 duration-300 实现滑入不遮挡；响应式用 sm:translate-x-full + md:block；蒙层需 z-40 sm:hidden；checkbox hack 要求 input 在前且同级。
移动端侧边栏怎么不遮挡内容还能滑入？
直接用 translate-x-0 和 translate-x-full 配合 transition-transform 最省事。Tailwind 默认的位移类已经预设好常见偏移量，不需要自己写 transform 或媒体查询——但前提是侧边栏初始状态得是 translate-x-full（完全移出视口右侧），点击按钮再切到 translate-x-0。
容易踩的坑：
- 忘记给侧边栏加
fixed或absolute定位，导致位移时页面重排、内容跳动 - 没设
inset-y-0 right-0，位移后侧边栏位置飘走 - 过渡时间太长（比如
duration-700），用户觉得卡顿；建议用duration-300或duration-500
如何让侧边栏只在移动端出现？
Tailwind 的响应式前缀就是干这个的：sm:hidden 隐藏小屏以上设备，md:block 在中屏及以上显示。但注意：侧边栏本身要加 sm:translate-x-0，否则在小屏下它还是 translate-x-full，点不动。
推荐结构逻辑：
- 侧边栏容器加
fixed inset-y-0 right-0 w-64 bg-white shadow-lg z-50 sm:translate-x-full transition-transform duration-300 ease-in-out - 控制它的显隐类（如
translate-x-0/sm:translate-x-full）由 JS 切换，或用 checkbox hack - 主内容区加
sm:ml-64，避免侧边栏展开时被遮住（仅中屏以上生效）
点击蒙层关闭侧边栏时，为什么点不到？
常见原因是蒙层（overlay）没设 z-40，或者侧边栏的 z-50 不够高，导致蒙层被盖在下面；另一个更隐蔽的问题是：蒙层用了 hidden 类但没配合 sm:hidden，结果在桌面端也占 layout 位置，影响点击穿透。
实操要点：
- 蒙层用
fixed inset-0 bg-black/50 z-40 sm:hidden - 确保蒙层和侧边栏都加了
transition-opacity，关闭时同步淡出 - 别用
pointer-events-none在蒙层上——它会让点击失效；要用就加在“关闭后”的状态里
用 checkbox hack 实现纯 CSS 侧边栏，要注意什么？
这是不依赖 JS 的轻量方案，核心是用隐藏的 <input type="checkbox"> + :checked ~ 选择器控制兄弟元素。但它对 HTML 结构敏感，且无法监听外部关闭（比如点击蒙层后自动取消勾选）。
关键约束：
-
<input>必须和侧边栏、蒙层在同一个父容器内，且在它们前面 - 侧边栏用
.sidebar { @apply ... sm:translate-x-full; }，然后写input:checked ~ .sidebar { @apply translate-x-0; } - 移动端按钮必须是
<label for="toggle"></label>，不能用button，否则无法触发 checkbox - 桌面端想默认展开？加
sm:translate-x-0并移除:checked相关规则即可
复杂点在于：一旦需要支持「点击蒙层关闭」或「ESC 关闭」，就必须上 JS——纯 CSS 做不到反向同步状态。别硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
