| 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-500 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-500 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",
);