visibility

Ejemplos

Ocultar elementos

Usa la utilidad invisible para ocultar un elemento, pero manteniendo su lugar en el documento y afectando al diseño de otros elementos:

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

Para eliminar completamente un elemento del documento, usa la propiedad display en su lugar.

Colapsar elementos

Usa la utilidad collapse para ocultar filas de tablas, grupos de filas, columnas y grupos de columnas como si estuvieran configurados en display: none, pero sin afectar el tamaño de otras filas y columnas:

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

Esto hace posible alternar dinámicamente filas y columnas sin afectar el diseño de la tabla.

Mostrar elementos

Usa la utilidad visible para hacer visible un elemento:

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

Esto es muy útil para deshacer la utilidad invisible en diferentes tamaños de pantalla.

Diseño responsivo

Antepone a la utilidad visibility el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.