布局
用于控制元素可见性的实用工具。
使用 invisible
隐藏元素,但仍保留其在 DOM 中的位置,影响其他元素的布局(与 display 文档中的 hidden
进行比较)。
<div class="grid grid-cols-3 gap-4">
<div>01</div>
<div class="invisible ...">02</div>
<div>03</div>
</div>
使用 collapse
隐藏表格行、行组、列和列组,就像将它们设置为 display: none
一样,但不会影响其他行和列的大小。
这使得可以动态切换行和列,而不会影响表格布局。
发票 # | 客户 | 金额 |
---|---|---|
#100 | Pendant Publishing | $2,000.00 |
#101 | Kruger Industrial Smoothing | $545.00 |
#102 | J. Peterman | $10,000.25 |
`collapse`
隐藏一行发票 # | 客户 | 金额 |
---|---|---|
#100 | Pendant Publishing | $2,000.00 |
#101 | Kruger Industrial Smoothing | $545.00 |
#102 | J. Peterman | $10,000.25 |
`hidden`
隐藏一行发票 # | 客户 | 金额 |
---|---|---|
#100 | Pendant Publishing | $2,000.00 |
#101 | Kruger Industrial Smoothing | $545.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>
使用 visible
使元素可见。这在不同的屏幕尺寸下撤销 invisible
实用程序时非常有用。
<div class="grid grid-cols-3 gap-4">
<div>01</div>
<div class="visible ...">02</div>
<div>03</div>
</div>
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如,使用 hover:invisible
仅在悬停时应用 invisible
实用程序。
<div class="visible hover:invisible">
<!-- ... -->
</div>
有关所有可用状态修饰符的完整列表,请查看 悬停、焦点和其他状态 文档。
您还可以使用变体修饰符来针对媒体查询,例如响应式断点、暗模式、更偏好减少动画等。例如,使用 md:invisible
仅在中等屏幕尺寸及以上应用 invisible
实用程序。
<div class="visible md:invisible">
<!-- ... -->
</div>