Sections

Visibility

Utilities for controlling the visibility of an element.

Class Properties
.visible visibility: visible;
.invisible visibility: hidden;

Usage

Use .visible to make an element visible.

<div class="flex justify-content-center">
  <div class="bg-gray-200"></div>
  <div class="bg-gray-400 visible"></div>
  <div class="bg-gray-600"></div>
</div>

Use .invisible to hide an element while still affecting the layout of other elements.

<div class="flex justify-content-center">
  <div class="bg-gray-200"></div>
  <div class="bg-gray-400 invisible"></div>
  <div class="bg-gray-600"></div>
</div>

Variants

By default, only responsive variants are generated for visibility utilities.

Responsive

To control the position of an element at a specific breakpoint, add a {screen}: prefix to any existing visibility utility.

For example, use .md:invisible to apply the invisible utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:invisible, add "visibility" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "visibility",
);