Tailwind CSS on GitHub

可见性

Utilities for controlling the visibility of an element.

Default class reference

Class
Properties
visiblevisibility: visible;
invisiblevisibility: hidden;

不可见

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

1
3
<div class="flex justify-center space-x-4">
  <div>1</div>
  <div class="invisible ...">2</div>
  <div>3</div>
</div>

可见

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

1
2
3
<div class="flex justify-center space-x-4">
  <div>1</div>
  <div class="visible ...">2</div>
  <div>3</div>
</div>

响应式

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 属性设置为 false 来完全禁用它们:

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