Visibility

Controls whether an element is visually perceivable without affecting its layout. Unlike display:none (which removes the element from the flow), visibility: hidden makes an element invisible while still occupying space. In Tailwind v4, visibility utilities have improved interaction with animation and transition utilities for more sophisticated UI effects.

Layout1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="space-y-4">
  <div class="p-4 bg-blue-100 rounded">Visible element</div>
  <div class="invisible p-4 bg-red-100 rounded">Invisible element (still takes up space)</div>
  <div class="p-4 bg-green-100 rounded">Another visible element</div>
</div>

Examples

Comparing visible and invisible elements - note that the invisible element still occupies space

<div class="space-y-4">
  <div class="p-4 bg-blue-100 rounded">Visible element</div>
  <div class="invisible p-4 bg-red-100 rounded">Invisible element (still takes up space)</div>
  <div class="p-4 bg-green-100 rounded">Another visible element</div>
</div>

Edit in playground

Tooltip using visibility and opacity for a smooth appearance effect

<!-- Tooltip implementation -->
<div class="relative inline-block">
  <button class="bg-blue-500 text-white px-4 py-2 rounded">Hover me</button>
  <div class="invisible group-hover:visible absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 bg-gray-900 text-white text-sm px-3 py-1 rounded pointer-events-none transition-opacity opacity-0 group-hover:opacity-100">
    Tooltip text
    <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
  </div>
</div>

Edit in playground

Making content visually hidden but accessible to screen readers using the sr-only utility (which uses specialized visibility techniques)

<!-- Accessible content for screen readers only -->
<button class="relative px-4 py-2 bg-blue-500 text-white rounded">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
  </svg>
  <span class="sr-only">Previous page</span>
</button>

Edit in playground

Content placeholder that uses visibility to swap in real content when loaded

<!-- Loading state with placeholder -->
<div class="max-w-md mx-auto border rounded-lg overflow-hidden shadow-md flex flex-col h-96">
  <div class="border-b p-3 bg-white">
    <h3 class="font-bold">Chat with Support</h3>
  </div>
  
  <div class="max-h-[calc(100%-8rem)] overflow-y-auto flex-grow p-4 bg-gray-50">
    <div class="flex flex-col space-y-3">
      <div class="bg-gray-200 p-3 rounded-lg self-start max-w-[80%]">
        <p>Hello! How can I help you today?</p>
      </div>
      <div class="bg-blue-500 text-white p-3 rounded-lg self-end max-w-[80%]">
        <p>I'm having an issue with my recent order.</p>
      </div>
      <div class="bg-gray-200 p-3 rounded-lg self-start max-w-[80%]">
        <p>I'm sorry to hear that. Could you provide your order number?</p>
      </div>
      <div class="bg-blue-500 text-white p-3 rounded-lg self-end max-w-[80%]">
        <p>Sure, it's #12345-67890.</p>
      </div>
      <div class="bg-gray-200 p-3 rounded-lg self-start max-w-[80%]">
        <p>Thank you! I can see your order. What seems to be the issue?</p>
      </div>
      <div class="bg-blue-500 text-white p-3 rounded-lg self-end max-w-[80%]">
        <p>I received the wrong item in my package.</p>
      </div>
      <div class="bg-gray-200 p-3 rounded-lg self-start max-w-[80%]">
        <p>I understand. I'll help you resolve this right away. Could you describe what you received versus what you ordered?</p>
      </div>
    </div>
  </div>
  
  <div class="p-3 bg-white border-t">
    <div class="flex items-center space-x-2">
      <input type="text" class="flex-grow p-2 border rounded-md" placeholder="Type a message...">
      <button class="bg-blue-500 text-white p-2 rounded-md">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  </div>
</div>

Edit in playground

Live Preview

Try the Visibility utility with different values

Open Interactive Playground

Variants

visible: normal visibility; invisible: element is not visible but still occupies space in layout; collapse: specialized value primarily for table rows/columns to remove them while potentially redistributing space

visibleinvisiblecollapse