visibility

Controlling whether an element is visible.

Overview

Examples

Hide but preserve layout

Use invisible when an element should not be painted but should still reserve its layout space.

<div class="invisible">  Hidden placeholder</div>

@layer utilities {  .invisible {    visibility: hidden  }}

Make an element visible again

Use visible to override an inherited or conditional hidden state.

<div class="invisible visible@sm">  Visible on larger screens</div>

Collapse table rows

Use visibility:collapse for table rows or columns that should be hidden using table collapse behavior.

<tr class="visibility:collapse">  <td>Collapsed row</td></tr>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="invisible:hover visible@print visible@sm">...</div>