不能直接用hidden或invisible类做切换——hidden编译为display:none使元素退出渲染树导致动画失效、可访问性崩坏；invisible虽保留占位但浏览器禁止对visibility:hidden元素执行transform动画，且二者均无初始状态控制。
纯 CSS 的 Tailwind 标签页切换必须放弃 display: none，否则动画失效、可访问性崩坏、首屏空白——得用 visibility + transform + z-index 组合控制显隐。
为什么不能直接用 hidden 或 invisible 类做切换？
很多人一上来就写 hidden 切换面板，结果发现：点击后内容闪一下才出现、动画完全不触发、屏幕阅读器读不到非激活页、甚至 SSR 首屏白屏。根本原因是：
-
hidden编译为display: none，元素彻底退出渲染树，transition 对它无效 -
invisible是visibility: hidden，虽保留占位，但无法配合transform做滑入滑出（浏览器禁止对visibility: hidden元素做 transform 动画） - 没有初始状态控制：所有面板默认隐藏，没设“第一个显示”，页面打开就是空的
用 input[type="radio"] + :checked 实现稳定切换
这是目前兼容性最好、可控性最强、支持默认选中和过渡动画的纯 CSS 方案。关键点全在结构和选择器链上：
-
<input>必须用position: absolute; clip: rect(0 0 0 0);隐藏（不能用display: none，否则某些浏览器会丢焦点能力） -
<label></label>必须紧跟<input>后，中间不能插任何元素，否则input:checked + label失效 - 内容区必须用通用兄弟选择器
~，如#tab1:checked ~ #panel1，意味着#panel1要在同一个父容器内、且排在所有<input>之后 - 所有
<input>的name属性必须相同（如name="tabs"），否则互斥失效
示例片段（省略样式类，仅示意结构）：
<div class="tabs-container"> <input type="radio" name="tabs" id="tab1" checked><label for="tab1">首页</label> <input type="radio" name="tabs" id="tab2"><label for="tab2">关于</label> <div id="panel1" class="tab-panel">…</div> <div id="panel2" class="tab-panel">…</div> </div>
Tailwind 中如何写平滑过渡动画？
不能依赖 transition-all，必须显式声明可动画属性：
- 所有面板初始设：
absolute inset-0 opacity-0 pointer-events-none z-0，再加transition-opacity duration-300 - 激活面板追加：
opacity-100 pointer-events-auto z-10 - 若要滑动效果，改用
translate-x-0/translate-x-full+visibility，并写死transition: visibility 0s 0.3s, transform 0.3s ease - 避免用
max-height过渡：设小了撑不开内容，设大了末尾拖慢，且触发重排
注意：transition 必须放在面板元素上，不是放在 input:checked ~ .tab-panel 规则里——后者是状态切换，动画属性得挂载到目标元素本身。
响应式下拉式 Tabs 的结构陷阱
小屏改下拉菜单时，常见错误是两套结构并存或显隐逻辑打架：
- 大屏用
flex横向排列.tab-list，小屏用block显示.dropdown-menu，二者@media规则必须严格互斥 -
.dropdown-menu必须紧接在<input type="checkbox">后面，才能用input:checked ~ .dropdown-menu控制显隐 - 父容器不能设
overflow: hidden，否则下拉内容被裁剪 - 非激活面板必须同步管理
aria-hidden="true"和tabindex="-1"，否则可访问性失败
最易忽略的一点：<input> 的 id 和 <label></label> 的 for 值必须完全一致，大小写、连字符、空格都不能错——Tailwind 不校验这个，但浏览器会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
