Utilities for controlling the visibility of an element.
Tóm Tắt
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
02
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
#101
Kruger Industrial Smoothing
$545.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.
