1. 布局
  2. 可见性

Quick reference

属性
visiblevisibility: visible;
invisiblevisibility: hidden;
collapsevisibility: collapse;

基本用法

¥Basic usage

使元素不可见

¥Making elements invisible

使用 invisible 工具隐藏元素,但仍保留其在 DOM 中的位置,从而影响其他元素的布局(与 display 文档中的 hidden 进行比较)。

¥Use the invisible utility to hide an element, but still maintain its place in the DOM, affecting the layout of other elements (compare with hidden from the display documentation).

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

折叠元素

¥Collapsing elements

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

¥Use the collapse utility to hide table rows, row groups, columns, and column groups as if they were set to display: none, but without impacting the size of other rows and columns.

这使得在不影响表格布局的情况下动态切换行和列成为可能。

¥This makes it possible to dynamically toggle rows and columns without affecting the table layout.

Showing all rows
Invoice # Client Amount
#100 Pendant Publishing $2,000.00
#101 Kruger Industrial Smoothing $545.00
#102 J. Peterman $10,000.25
Hiding a row using `collapse`
Invoice # Client Amount
#100 Pendant Publishing $2,000.00
#101 Kruger Industrial Smoothing $545.00
#102 J. Peterman $10,000.25
Hiding a row using `hidden`
Invoice # Client Amount
#100 Pendant Publishing $2,000.00
#102 J. 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>

使元素可见

¥Making elements visible

使用 visible 工具使元素可见。这主要用于在不同屏幕尺寸下撤消 invisible 工具。

¥Use the visible utility to make an element visible. This is mostly useful for undoing the invisible utility at different screen sizes.

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

有条件地应用

悬停、聚焦和其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如,使用hover:invisible 仅在 hover 时应用 invisible 工具。

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

有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。

断点和媒体查询

你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:invisible 仅在中等屏幕尺寸及以上时应用 invisible 工具。

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

要了解更多信息,请查看有关 响应式设计暗黑模式、以及 其他媒体查询修饰符 的文档。