侧边栏折叠需宽度变化、内容隐藏和布局重排三要素配合，推荐用 max-w-0/max-w-64 + overflow-hidden + flex-shrink-0 + transition-all 实现平滑响应式折叠，避免 w-0 或 hidden 导致的布局异常。
侧边栏折叠的本质是宽度与显示状态的组合控制
单纯靠 w-full 和 w-1/4 切换无法实现“折叠”效果——它们只改宽度，不处理溢出、堆叠或交互逻辑。真实折叠需要三要素：宽度变化 + 内容隐藏（或压缩）+ 布局重排（比如主内容占满剩余空间）。Tailwind 中最直接的方式是结合 hidden/block 或 max-w-0/max-w-xs 配合 transition-all。
用 max-w- 替代 w- 更安全
w-1/4 在小屏下会强制占 25% 宽度，破坏响应式；max-w-64（约 16rem）配合 flex-shrink-0 才能保证侧边栏有上限又不撑开容器。折叠时设为 max-w-0，再加 overflow-hidden 防止内容外露：
<div class="flex">
<aside class="max-w-64 flex-shrink-0 transition-all duration-300 overflow-hidden">
<nav>...</nav>
</aside>
<main class="flex-1">...</main>
</div>
- 折叠态：给
<aside>加max-w-0 - 展开态：移除
max-w-0，保留max-w-64 - 必须加
overflow-hidden，否则文字或图标可能在max-w-0下仍部分可见 - 避免用
w-0—— 它会让子元素 width 计算异常，尤其内含 flex 布局时
移动端默认折叠 + 点击展开的常见实现
用一个布尔状态控制类名，例如 React 中的 isSidebarOpen，或 Vue 的 sidebarOpen。关键不是切 w-，而是切换布局结构：
// React 示例片段
<div className="flex">
<aside
className={\`transition-all duration-300 \${isSidebarOpen ? 'max-w-64' : 'max-w-0'} flex-shrink-0 overflow-hidden\`}
>
<button onClick={() => setIsSidebarOpen(false)}>✕</button>
<nav>...</nav>
</aside>
<main className="flex-1">
<button onClick={() => setIsSidebarOpen(true)}>☰</button>
<div>主内容</div>
</main>
</div>
- 移动端默认
max-w-0，桌面端可用md:max-w-64自动展开 - 别忘了给
<main>加flex-1，否则侧边栏收缩后主内容不会自动撑满 - 如果用
hidden替代max-w-0，动画会失效（hidden是 display: none），只能做硬切
折叠后图标错位？检查子元素的 whitespace-nowrap 和 flex 行为
侧边栏里常用 flex flex-col 放菜单项，但折叠到 max-w-0 时，文字若没限制换行或最小宽度，会把容器撑开。典型表现：折叠后还看到一竖条图标，或图标被压扁变形。
立即学习“前端免费学习笔记（深入）”；
- 给菜单项加
whitespace-nowrap防文字撑宽 - 图标容器用
flex items-center justify-center w-12 h-12固定尺寸，不依赖文字宽度 - 避免对
<aside>内部元素设w-full—— 它在max-w-0下会失效并引发布局抖动 - 调试时临时加
bg-red-200到<aside>，看实际渲染宽度是否符合预期
flex-shrink-0 和 overflow-hidden 的组合。没有前者，max-w-0 可能被父 flex 容器压缩得更彻底；没有后者，折叠态下 SVG 或按钮仍可能破框而出。 
