纯用 tailwind 可快速搭建导航栏，但需注意结构、断点与移动端状态控制；nav 需嵌套在 flex 容器中对齐，桌面端用 justify-between 和 items-center 实现左右分置与垂直居中，移动端须用状态驱动类名切换而非静态 hidden/flex，并确保 sticky 定位的父容器无 overflow-hidden 等干扰属性，同时兼顾可访问性。
纯用 Tailwind 的 utility 类就能搭出可用的导航栏，但“快速”不等于“堆类名”——结构错、断点漏、移动端状态失控，三分钟写的代码可能要花半小时调试。
nav 元素必须包裹在 flex 容器里才能对齐内容
直接给 <nav></nav> 加 flex 往往没用，因为浏览器默认把它当块级元素，内部子项不会自动横向排列。真正起作用的是中间那层 <div class="flex justify-between items-center">。
<ul>
<li>桌面端 logo 和菜单需左右分置：用 <code>justify-between，别依赖 ml-auto 手动推
items-center，否则 h-16 里文字会贴顶float 或 absolute 破坏文档流——响应式切换时容易错位移动端菜单不能只靠 hidden/flex 切换
写 hidden md:flex 看似简单，但实际运行中常出现“小屏点开后大屏还隐藏”或“菜单闪一下才出现”。根本原因是类名没被状态驱动，而是静态写死。
- 原生 JS 场景：用
classList.toggle('hidden')前，先classList.remove('hidden')清掉其他断点残留 - React/Vue：必须用条件表达式控制，比如
className={\`md:flex \${open ? 'flex' : 'hidden'}\`}，而不是hidden md:flex并列写 - 纯 CSS 方案（无 JS）：得用
<input type="checkbox" class="peer sr-only">+peer-checked:xxx，且<nav></nav>必须是它的兄弟元素，顺序不能错
sticky 导航栏 top-0 失效的三个高频原因
sticky top-0 不是“设了就粘”，它对父容器和自身样式极其敏感。常见失效不是 Tailwind 问题，而是布局干扰。
- 父级有
overflow-hidden、transform、will-change：这些会创建新层叠上下文，直接废掉 sticky 行为 - 没显式写
top-0：只写sticky无效，CSS 不识别孤立的position: sticky - z-index 不够：如果后面有
hero区域用了z-40，你的导航至少得z-50，否则滚动时被盖住
全屏菜单 fixed 定位必须避开 header 高度
写 fixed inset-0 后发现菜单顶部被固定 header 挡住，不是 JS 测量不准，而是没预留空间。
- 别用
top-16这类 magic number：header 高度改了就得同步改菜单 - 推荐方案：在
<header></header>上定义style="--header-height: 4rem;"，菜单上写top-[var(--header-height)] - 长菜单必须加
overflow-y-auto，否则内容溢出视口，底部链接点不到
最易被忽略的是可访问性：汉堡按钮没 aria-expanded，菜单没 role="navigation"，键盘用户 Tab 到一半就卡住——这些不是“锦上添花”，而是焦点逻辑断裂的直接诱因。
