visibility

Utilities for controlling the visibility of an element.

2025-04-10

Written by: tdtc

Making elements invisible

Use the invisible utility to hide an element, but still maintain its place in the document, affecting the layout of other elements:

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

Collapsing elements

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:

<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>

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

Making elements visible

Use the visible utility to make an element visible:

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

This is mostly useful for undoing the invisible utility at different screen sizes.

Ref

• visibility
• Responsive design