可见性

不可见

使用 invisible 隐藏一个元素，但仍然保持它在 DOM 中的位置，影响其他元素的布局（与 display 文档中的 .hidden 比较）。

可见

使用 visible 使一个元素可见。这对于在不同的屏幕尺寸下撤销 invisible 功能类非常有用。

响应式

To apply a visibility utility only at a specific breakpoint, add a {screen}: prefix to the existing class name. For example, adding the class md:invisible to an element would apply the invisible utility at medium screen sizes and above. 要仅在一个特定断点应用 visibility 功能，请在现有的类名前 添加 {screen}: 前缀。例如，将类 md:invisisible 添加到一个元素上，就可以在中等大小和更大的屏幕上应用 invisible 功能类。

<div class="visible md:invisible ..."></div>

了解更多关于 Tailwind 响应式设计功能的信息，查看 响应式设计 文档。

定制

变体

默认情况下， 针对 visibility 功能类，只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 visibility 属性来控制为 visibility 功能生成哪些变体。

例如，这个配置也将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       visibility: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 visibility 功能，您可以通过在配置文件的 corePlugins 部分将 visibility property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     visibility: false,
    }
  }