Tailwind CSS home page
  1. Layout
  2. Visibility

Quick reference

Class
Properties
visiblevisibility: visible;
invisiblevisibility: hidden;
collapsevisibility: collapse;

Basic usage

Making elements invisible

Use invisible to hide an element, but still maintain its place in the DOM, affecting the layout of other elements (compare with hidden from the display documentation).

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

Collapsing elements

Use collapse 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.

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

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

Making elements visible

Use visible to make an element visible. This is mostly useful for undoing the invisible utility at different screen sizes.

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

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:invisible to only apply the invisible utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:invisible to apply the invisible utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.