Layout
用於控制元素可見性的通用類別。
| Class | Styles |
|---|---|
visible | visibility: visible; |
invisible | visibility: hidden; |
collapse | visibility: collapse; |
使用 invisible 通用類別來隱藏元素，但仍保留其在文件中的位置，影響其他元素的佈局：
<div class="grid grid-cols-3 gap-4"> <div>01</div> <div class="invisible ...">02</div> <div>03</div></div>要從文件中完全移除元素，請改用 display 屬性。
使用 collapse 通用類別來隱藏表格行、行群組、欄和欄群組，效果如同設定 display: none，但不會影響其他行和欄的大小：
| Invoice # | Client | Amount |
|---|---|---|
| #100 | Pendant Publishing | $2,000.00 |
| #101 | Kruger Industrial Smoothing | $545.00 |
| #102 | J. Peterman | $10,000.25 |
`collapse`| Invoice # | Client | Amount |
|---|---|---|
| #100 | Pendant Publishing | $2,000.00 |
| #101 | Kruger Industrial Smoothing | $545.00 |
| #102 | J. Peterman | $10,000.25 |
`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 通用類別使元素可見：
<div class="grid grid-cols-3 gap-4"> <div>01</div> <div class="visible ...">02</div> <div>03</div></div>這主要用於在不同螢幕尺寸下取消 invisible 通用類別的效果。
在 visibility 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="visible md:invisible ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。