Visibility

Visibility utilities for controlling element visibility without affecting layout.

Visibility Values

Control whether an element is visible or invisible.

CSS

.visible     /* visibility: visible - element is visible (default) */
.invisible   /* visibility: hidden - element is invisible but still takes up space */
.collapse    /* visibility: collapse - for table rows/columns, removes from layout */

Visibility vs Display

Understanding the difference between visibility and display utilities.

Class	Takes Space	Clickable	Use Case
`.visible`	Yes	Yes	Default state
`.invisible`	Yes	No	Hide but keep space
`.hidden`	No	No	Remove from layout
`.collapse`	No	No	Table row collapse

Responsive Visibility

Apply visibility utilities at specific breakpoints.

CSS

/* Small screens and up */
.sm:visible .sm:invisible .sm:collapse

/* Medium screens and up */
.md:visible .md:invisible .md:collapse

/* Large screens and up */
.lg:visible .lg:invisible .lg:collapse

/* Extra large screens and up */
.xl:visible .xl:invisible .xl:collapse

/* 2x extra large screens and up */
.xxl:visible .xxl:invisible .xxl:collapse

Print Visibility

Control visibility when printing.

CSS

.no-print       /* Hidden when printing */
.print:hidden   /* Hidden when printing (alternative syntax) */

Common Patterns

Toggle Visibility on Hover

HTML

<div class="invisible hover:visible">
  This appears on hover without affecting layout
</div>

Loading State Placeholder

HTML

<button class="relative">
  <span class="invisible">Loading...</span>
  <span class="absolute inset-0 flex items-center justify-center">
    <svg class="animate-spin h-5 w-5" />
  </span>
</button>

Collapse Table Rows

HTML

<table>
  <tr class="visible">Visible row</tr>
  <tr class="collapse">Collapsed row - removed from layout</tr>
  <tr class="visible">Visible row</tr>
</table>

Hide from Print

HTML

<div class="no-print">
  This content won't appear when printing
  (like navigation menus, sidebars, etc.)
</div>