Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

visibility

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
visible visibility: visible;
invisible visibility: hidden;
collapse visibility: collapse;

Examples#

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 className="col-start-1 row-start-1 grid grid-cols-3 gap-4 font-mono text-sm leading-6 font-bold text-white">
    <div className="flex items-center justify-center rounded-lg bg-cyan-500 p-4">01</div>
    <div className="invisible flex items-center justify-center rounded-lg bg-cyan-500 p-4">02</div>
    <div className="flex items-center justify-center rounded-lg bg-cyan-500 p-4">03</div>
  </div>
</div>

}

<!-- [!code classes:invisible] -->
<div class="grid grid-cols-3 gap-4">
  <div>01</div>
  <div class="invisible ...">02</div>
  <div>03</div>
</div>

To completely remove an element from the document, use the display property instead.

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:

{

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
}

<!-- [!code classes:collapse] -->
<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:

{

01
02
03
}

<!-- [!code classes: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.

Responsive design#