Tailwind CSS - Visibility

Modern Tailwind CSS: Visibility and Display

In modern web development, controlling whether an element is visible, takes up space, or is removed from the document flow entirely is a fundamental task. Tailwind CSS provides a suite of utility classes to manage the visibility and display properties of elements in a declarative and responsive way.

Controlling Visibility: `visible` and `invisible`

These utilities control the visibility CSS property. An invisible element is not painted on the screen, but it still occupies its space in the layout.

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

Key Difference: `invisible` vs. `hidden`

It’s crucial to understand the difference between the invisible utility and the hidden utility. They are not the same!

invisible (visibility: hidden): The element is hidden visually, but it still takes up its original space in the DOM. Think of it as a transparent ghost.
hidden (display: none): The element is completely removed from the document flow. It takes up no space and is as if it doesn’t exist on the page. This is a separate utility that controls the display property.

Example: `invisible` vs. `hidden`

Notice how the invisible element reserves space in the layout, while the hidden element’s space is collapsed.

<!-- Modern Project Setup Note:
  This example assumes you have Tailwind CSS set up in your project.
  Run `npm install -D tailwindcss` and `npx tailwindcss init`,
  then configure your `tailwind.config.js` and a build process.
-->
<div class="flex justify-around p-4 font-mono text-center text-white">

  <!-- The invisible element still occupies space -->
  <div class="flex flex-col items-center space-y-2">
    <p class="text-slate-900 dark:text-slate-200">`invisible`</p>
    <div class="flex space-x-2 text-sm">
      <div class="w-24 h-24 rounded-lg bg-sky-500 flex items-center justify-center">1</div>
      <div class="w-24 h-24 rounded-lg bg-sky-500 flex items-center justify-center invisible">2</div>
      <div class="w-24 h-24 rounded-lg bg-sky-500 flex items-center justify-center">3</div>
    </div>
  </div>

  <!-- The hidden element is removed from the layout -->
  <div class="flex flex-col items-center space-y-2">
    <p class="text-slate-900 dark:text-slate-200">`hidden`</p>
    <div class="flex space-x-2 text-sm">
      <div class="w-24 h-24 rounded-lg bg-pink-500 flex items-center justify-center">1</div>
      <div class="w-24 h-24 rounded-lg bg-pink-500 flex items-center justify-center hidden">2</div>
      <div class="w-24 h-24 rounded-lg bg-pink-500 flex items-center justify-center">3</div>
    </div>
  </div>

</div>

Best Practices & Accessibility

Accessibility: Content set to invisible is still part of the accessibility tree. Screen readers may still announce it, which can lead to a confusing user experience. The hidden class (display: none) removes the element from both the visual layout and the accessibility tree. Use invisible for animations or layout-preserving effects, and hidden to truly conceal content.
Conditional Rendering: In JavaScript frameworks like React, Vue, or Svelte, it’s often better to use conditional logic ({isShown && <Component />}) to add or remove elements from the DOM. This is equivalent to using display: none (hidden).
Responsive Control: A powerful feature of Tailwind is responsive variants. You can show or hide elements based on screen size. For example, invisible md:visible makes an element invisible on small screens but visible on medium screens and up.

Special Case: `collapse`

The collapse utility sets visibility: collapse;. Its behavior is primarily intended for table elements like rows and columns.

On Table Elements: It acts like display: none, removing the row or column without leaving empty space, and allowing the table layout to adjust.
On Other Elements: Browser behavior for collapse on non-table elements is inconsistent. On some browsers, it acts like invisible, while on others it acts like hidden. Due to this inconsistency, it is highly recommended to only use collapse for table elements. For other elements, use hidden.

Example: `collapse` on a Table Row

<div class="p-4">
  <h3 class="text-lg font-semibold mb-2">User Permissions</h3>
  <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 border-collapse">
    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
      <tr>
        <th scope="col" class="px-6 py-3">User</th>
        <th scope="col" class="px-6 py-3">Role</th>
        <th scope="col" class="px-6 py-3">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
        <td class="px-6 py-4">Alice</td>
        <td class="px-6 py-4">Admin</td>
        <td class="px-6 py-4">Active</td>
      </tr>
      <!-- This row is collapsed and takes no space -->
      <tr class="collapse bg-white border-b dark:bg-gray-800 dark:border-gray-700">
        <td class="px-6 py-4">Bob (Archived)</td>
        <td class="px-6 py-4">Editor</td>
        <td class="px-6 py-4">Inactive</td>
      </tr>
      <tr class="bg-white dark:bg-gray-800">
        <td class="px-6 py-4">Charlie</td>
        <td class="px-6 py-4">Viewer</td>
        <td class="px-6 py-4">Active</td>
      </tr>
    </tbody>
  </table>
</div>

Tailwind CSS - Visibility

Modern Tailwind CSS: Visibility and Display

Controlling Visibility: visible and invisible

Key Difference: invisible vs. hidden

Example: invisible vs. hidden