Layout
visibility
用于控制元素可见性的功能类。
| Class | Styles |
|---|---|
visible | visibility: visible; |
invisible | visibility: hidden; |
collapse | visibility: collapse; |
示例
使元素不可见
使用 invisible 功能类来隐藏元素，但仍保持其在文档中的位置，这会影响其他元素的布局：
01
02
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，但不会影响其他行和列的大小：
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 |
| #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 功能类来使元素可见：
01
02
03
<div class="grid grid-cols-3 gap-4"> <div>01</div> <div class="visible ...">02</div> <div>03</div></div>这主要用于在不同屏幕尺寸下取消 invisible 功能类的效果。
响应式设计
Prefix a visibility utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="visible md:invisible ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.
