Tailwind CSS - 可见性

现代 Tailwind CSS：可见性与显示

在现代 Web 开发中，控制元素是否可见、是否占据空间或是否完全从文档流中移除是一项基本任务。Tailwind CSS 提供了一套工具类，以声明式和响应式的方式管理元素的可见性（visibility）和显示（display）属性。

控制可见性：`visible` 和 `invisible`

这些工具类控制 CSS 属性 visibility。一个 invisible 的元素不会在屏幕上绘制，但它仍然在布局中占据其空间。

类名（Class）	CSS 属性（CSS Properties）
visible	visibility: visible;
invisible	visibility: hidden;

主要区别：`invisible` 与 `hidden`

理解 invisible 工具类与 hidden 工具类之间的区别至关重要。它们并不相同！

invisible (visibility: hidden)：元素在视觉上是隐藏的，但它仍然在文档对象模型（DOM）中占据其原始空间。可以将其想象成一个透明的幽灵。
hidden (display: none)：元素完全从文档流中移除。它不占用任何空间，就好像它不存在于页面上一样。这是一个单独的工具类，控制 display 属性。

示例：`invisible` 与 `hidden`

请注意 invisible 元素如何在布局中保留空间，而 hidden 元素的空间则被折叠。

<!-- 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.
-->
<!-- 现代项目设置注意：
  此示例假定您已在项目中设置 Tailwind CSS。
  运行 `npm install -D tailwindcss` 和 `npx tailwindcss init`，
  然后配置您的 `tailwind.config.js` 文件和构建过程。
-->
<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>

最佳实践与可访问性

可访问性（Accessibility）：设置为 invisible 的内容仍然是可访问性树的一部分。屏幕阅读器可能仍然会播报它，这可能导致令人困惑的用户体验。hidden 类（display: none）将元素从视觉布局和可访问性树中完全移除。将 invisible 用于动画或保持布局的效果，将 hidden 用于真正隐藏内容。
条件渲染（Conditional Rendering）：在 JavaScript 框架（如 React、Vue 或 Svelte）中，通常最好使用条件逻辑（例如 {isShown && <Component />}）来添加或移除 DOM 中的元素。这等同于使用 display: none (hidden)。
响应式控制（Responsive Control）：Tailwind 的一个强大功能是响应式变体。你可以根据屏幕尺寸显示或隐藏元素。例如，invisible md:visible 使元素在小屏幕上不可见，但在中等屏幕及以上可见。

特殊情况：`collapse`

collapse 工具类设置 visibility: collapse;。它的行为主要用于表格元素，如行和列。

在表格元素上：它的作用类似于 display: none，移除行或列而不留下空白空间，并允许表格布局进行调整。
在其他元素上：collapse 在非表格元素上的浏览器行为不一致。在某些浏览器中，它的作用类似于 invisible，而在另一些浏览器中，它的作用类似于 hidden。由于这种不一致性，强烈建议仅将 collapse 用于表格元素。 对于其他元素，请使用 hidden。

示例：表格行上的 `collapse`

<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 - 可见性

现代 Tailwind CSS：可见性与显示

控制可见性：visible 和 invisible

主要区别：invisible 与 hidden

示例：invisible 与 hidden