Tailwind CSS 显示与隐藏语法
在 Tailwind CSS 中，我们主要使用 display 属性和 visibility 属性来定义元素的显示与隐藏。
1. display 相关类名
在 Tailwind CSS 中，我们可以使用 display 属性相关的类名来显示或隐藏元素。其中，常用的类名如下表所示。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| hidden | display: none; | 彻底隐藏 |
| block | display: block; | 显示为 “块级元素” |
| flex | display: flex; | 显示为 “弹性盒子” |
| inline | display: inline; | 显示为 “行内元素” |
使用 display 相关类名来隐藏元素时，该元素将不再占据任何网页空间。
2. visibility 相关类名
在 Tailwind CSS 中，我们还可以使用 visibility 属性相关的类名来显示或隐藏元素。其中，常用的类名如下表所示。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| invisible | visibility: hidden; | 不可见（但仍占位） |
| visible | visibility: visible; | 可见 |
使用 visibility 相关类名来隐藏元素时，虽然元素看不见，但依然会占据原本的网页空间。
示例 1：两种隐藏方式对比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="bg-gray-200 p-4">
<span class="bg-red-400">盒子 A</span>
<span class="hidden bg-green-400">盒子 B</span>
<span class="bg-blue-400">盒子 C</span>
</div>
<div class="bg-gray-200 p-4 mt-8">
<span class="bg-red-400">盒子 A</span>
<span class="invisible bg-green-400">盒子 B</span>
<span class="bg-blue-400">盒子 C</span>
</div>
</body>
</html>页面效果如下图所示。
分析：
第 1 个 div 中，由于中间的 “盒子 B” 使用了 hidden，它会在文档流中彻底消失。因此最终 “盒子 A” 和 “盒子 C” 会紧紧挨在一起。
第 2 个 div 中，中间的 “盒子 B” 使用了 invisible。虽然你看不见它了，但它原本占据的空间还在，所以 “盒子 A” 和 “盒子 C” 之间留下了一块空白。
Tailwind CSS 响应式显示与隐藏
在实际开发中，经常会遇到这样一种场景：有些复杂的侧边栏或大图，然后我们希望它们在手机端隐藏起来，但在电脑端显示出来。
示例 2：响应式显隐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="hidden md:block p-10 bg-blue-400 text-white rounded">
绿叶网 - 为好教程，全力以赴
</div>
</body>
</html>当屏幕尺寸小于 768px（手机尺寸）时，页面效果如下图 1 所示。当屏幕尺寸大于等于 768px 时，页面效果如下图 2 所示。
分析：
hidden md:block 是一个非常经典的组合。它表示：默认情况下（即手机端）直接隐藏，当屏幕宽度达到 md 级别时，再将其恢复为 block 显示出来。
关于响应式的内容，我们在后面 “Tailwind CSS 响应式设计” 一节中会详细介绍，这里小伙伴们简单了解一下即可。
常见问题
1. hidden、invisible 和 opacity-0 这 3 种隐藏方式到底有什么区别呢？
这是前端面试中出现频率极高的一道题，也是新手在做页面交互时最容易踩的坑。在 Tailwind CSS 中，它们分别对应 3 种完全不同的业务场景：
- hidden（display: none）：彻底消失。不占位置，无法被点击，无法参与任何 CSS 过渡动画（transition）。
- invisible（visibility: hidden）：隐身占位。看不见，但保留原有的空间位置，无法被点击。
- opacity-0（opacity: 0）：全透明。看不见，保留位置，依然可以被点击触发事件，且完美支持淡入淡出动画。
