visible 类不控制 display，仅等价于 visibility: visible，对 display: none 元素无效；hidden 对应 display: none，invisible 对应 visibility: hidden，二者布局与事件行为截然不同。
visible 类不等于 display: block
很多人以为加了 visible 就能让元素“显示出来”，结果发现它对 display: none 的元素完全没用——因为 visible 只控制 visibility 属性，不影响 display。它只是让元素“看得见但占位”，类似 CSS 里的 visibility: visible，而 display: none 是彻底从渲染树里移除。
-
visible对display: none元素无效，必须先改回block、flex等有效值 - 适合做“视觉暂留”类交互，比如 hover 后淡入但保持布局稳定
- 和
invisible配对使用时，注意它不会触发重排（reflow），只影响重绘（repaint）
hidden 和 invisible 的关键区别在哪
这两个类名看着像，但行为完全不同：hidden 是 Tailwind 的 display: none 别名，而 invisible 是 visibility: hidden。一个删节点，一个藏节点。
-
hidden：元素不参与布局、不响应事件、父容器会塌缩——适合彻底隐藏表单字段或条件区块 -
invisible：元素仍占空间、能被 JS 获取尺寸、但鼠标悬停/点击无效（除非加pointer-events: auto） - 用错会导致动画卡顿：比如在
opacity-0+invisible上做 fade 动画，过渡会跳变，因为 visibility 不支持过渡
如何配合 JavaScript 动态切换可见性
直接操作 classList 最稳妥，但要注意 class 的覆盖顺序和初始状态是否冲突。
- 避免同时写
hidden和visible在同一元素上——后者不会覆盖前者，因为display: none优先级更高 - 推荐用
toggle或replace而非add/remove单独调用，防止残留状态 - 如果要兼容服务端渲染（SSR），别依赖 JS 初始化可见性，把默认状态写死在 HTML 上，比如 ...
响应式可见性类的陷阱
像 sm:hidden、lg:visible 这类响应式可见性类，容易被误读为“仅在该断点生效”，其实它们是“在该断点及以上/以下生效”，且存在层叠逻辑。
-
md:hidden lg:visible表示：在md断点（768px）及以上隐藏，在lg（1024px）及以上又显示——中间断点（768–1023px）仍是隐藏的 - 多个响应式可见类共存时，Tailwind 按 CSS 规则顺序应用，后写的会覆盖前写的，但前提是媒体查询条件匹配
- 移动端默认隐藏、桌面端显示的常见写法是
hidden md:block，不是md:visible——因为visible不改变display值
实际项目里最常出问题的，是把 invisible 当成“可动画的 hidden”来用，结果发现 transition opacity 失效，或者元素突然在动画中途闪现——这通常是因为 visibility 切换时机和 opacity 不同步，得靠 JS 控制 class 应用节奏，或者直接用 opacity-0 + pointer-events-none 组合替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
