Tailwind CSS 可见性

可见性

用于控制元素可见性的实用程序。

不可见

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

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

可见

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

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

响应式

要仅在一个特定断点应用 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,
    }
  }