visibility

Ejemplos

Haciendo elementos invisibles

Usa la utilidad invisible para ocultar un elemento, pero manteniendo su lugar en el documento, afectando el 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.

Colapsando elementos

Usa la utilidad collapse para ocultar filas de tabla, 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>Factura #</th> <!-- Invoice # -->
      <th>Cliente</th> <!-- Client -->
      <th>Monto</th> <!-- Amount -->
    </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.

Haciendo elementos visibles

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 útil principalmente para deshacer la utilidad invisible en diferentes tamaños de pantalla.

Responsive design

Prefija una utilidad visibility con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.