tabbar 必须用 fixed + bottom-0 并预留 safe-area-inset-bottom 空间，推荐 h-16、z-[100]、flex 布局，active 状态需文字变色+图标加粗+底部横线，点击区不小于 44×44px，用 data-active 控制状态并监听路由同步。
TabBar 必须用 fixed + bottom-0，但别忘了 safe-area-inset-bottom
移动端底部 TabBar 要始终贴底、不随滚动消失，fixed 是唯一可靠方案。直接写 fixed bottom-0 left-0 right-0 会遮住 iPhone 指纹/面容区域——iOS 系统要求留出 env(safe-area-inset-bottom) 的空间。
正确做法是：用 pb-[env(safe-area-inset-bottom)]（需 Tailwind v3.3+）或降级为 pb-safe（需在 tailwind.config.js 中手动添加 safe-area 插件），否则 TabBar 会被截断或按钮点不到。
- 如果项目未启用
postcss-env-function，pb-[env(safe-area-inset-bottom)]会编译失败，得回退到自定义 class -
h-16是常见高度，但 iOS 底部横条实际占约 34px，h-16（64px）更稳妥，留出点击热区 - 别用
z-50就完事——要确保高于所有内容，推荐z-[100]，避免和 modal、toast 的 z-index 冲突
用 flex 实现等宽图标+文字，但 active 状态不能只靠 text-blue-500
TabBar 项通常含图标和文字，用 flex flex-col items-center justify-center 布局最稳。但仅靠颜色区分选中态，在弱光/色盲场景下不可靠，必须叠加视觉提示。
推荐组合：文字变色 + 图标加粗 + 底部短横线（border-b-2 border-blue-500），且横线只出现在 active 项的 div 上，不是整个 TabBar。
- 图标建议用 inline SVG 或
heroicons的Icon组件，避免字体图标在缩放时模糊 - 文字用
text-xs（12px），太小看不清，太大挤不下 4–5 个 tab - 禁用
font-semibold全局加粗——active 项用font-bold即可，否则非 active 文字也发虚
点击区域至少 44×44px，但别给整个 flex 容器加 padding
iOS 人机界面指南明确要求最小触控目标为 44×44pt。如果只给文字加 py-2 px-4，实际点击区远小于标准，用户容易点空。
- 正确做法：给每个 tab 的外层
button或a设置min-w-[44px] min-h-[44px] flex items-center justify-center - 别在 flex 容器上加
px-3—— 这会让左右间距不均，tab 之间出现“呼吸感”间隙，破坏对齐 - 用
data-active="true"属性控制样式比用 JS 切 class 更轻量，也方便服务端渲染（SSR）时预设状态
路由切换时，如何让 active 状态同步更新？
Tailwind 本身不处理状态，得靠框架逻辑驱动。React 中常用 useLocation() 监听路径；Vue 用 useRoute()；纯 HTML 则靠 window.location.pathname 匹配。
关键点：不要把路径字符串硬编码进判断逻辑，比如 path === '/home'。应提取 pathname 后缀并 normalize：
- 用
new URL(window.location.href).pathname.replace(/\/$/, '') || '/'统一去除尾部斜杠 - React 示例：
const location = useLocation();<br>const isActive = location.pathname === '/settings';
- 如果用了 nested route（如
/user/profile），建议用location.pathname.startsWith('/user')而非全等
TabBar 不是装饰品，它承载导航意图。最常被忽略的是「返回时状态不同步」——比如从详情页后退，TabBar 还停在前一个 tab。这时候得监听 popstate 或用框架的 navigation guard 主动同步，而不是等用户再点一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
