1. 布局
  2. 可见性

布局

可见性

用于控制元素可见性的实用工具。

样式
可见
visibility: visible;
不可见
visibility: hidden;
折叠
visibility: collapse;

示例

使元素不可见

使用 invisible 实用工具隐藏元素,但仍保持其在文档中的位置,从而影响其他元素的布局

01
03
<div class="grid grid-cols-3 gap-4">  <div>01</div>  <div class="invisible ...">02</div>  <div>03</div></div>

要完全从文档中删除元素,请改用 display 属性。

折叠元素

使用 collapse 实用工具隐藏表格行、行组、列和列组,就像将它们设置为 display: none 一样,但不会影响其他行和列的大小

显示所有行
发票编号客户金额
#100Pendant Publishing$2,000.00
#101Kruger Industrial Smoothing$545.00
#102J. Peterman$10,000.25
使用 `collapse` 隐藏行
发票编号客户金额
#100Pendant Publishing$2,000.00
#101Kruger Industrial Smoothing$545.00
#102J. Peterman$10,000.25
使用 `hidden` 隐藏行
发票编号客户金额
#100Pendant Publishing$2,000.00
#102J. Peterman$10,000.25
<table>  <thead>    <tr>      <th>Invoice #</th>      <th>Client</th>      <th>Amount</th>    </tr>  </thead>  <tbody>    <tr>      <td>#100</td>      <td>Pendant Publishing</td>      <td>$2,000.00</td>    </tr>    <tr class="collapse">      <td>#101</td>      <td>Kruger Industrial Smoothing</td>      <td>$545.00</td>    </tr>    <tr>      <td>#102</td>      <td>J. Peterman</td>      <td>$10,000.25</td>    </tr>  </tbody></table>

这使得动态切换行和列成为可能,而不会影响表格布局。

使元素可见

使用 visible 实用工具使元素可见

01
02
03
<div class="grid grid-cols-3 gap-4">  <div>01</div>  <div class="visible ...">02</div>  <div>03</div></div>

这主要用于在不同的屏幕尺寸下撤消 invisible 实用工具。

响应式设计

前缀a visibility 实用工具 带有像 md: 这样的断点变体,仅在中等 屏幕尺寸及以上时应用该实用工具

<div class="visible md:invisible ...">  <!-- ... --></div>

变体文档中了解有关使用变体的更多信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策