Tailwind CSS 可见性

Tailwind CSS 是一个现代的 CSS 框架，它提供了许多方便的工具和类来快速创建响应式的布局。其中之一是可见性类，它提供了一种简单的方法来控制元素在特定屏幕尺寸下的显示和隐藏。

显示属性

显示属性用于控制元素在不同屏幕尺寸下的可见性。下面是 Tailwind CSS 提供的显示属性：

• visible
• invisible

visible

visible 属性用于显示元素。它可以结合以下的断点类来控制元素在不同屏幕尺寸下的显示：

• sm
• md
• lg
• xl
• 2xl

例如，要在小屏幕设备上显示一个元素，可以这样写：

<div class="visible sm:hidden">只在小屏幕设备上显示</div>

这个元素将在小屏幕设备上显示，在其他屏幕尺寸下隐藏。

invisible

invisible 属性用于隐藏元素。它也可以和断点类一起使用，以控制元素在不同屏幕尺寸下的隐藏。

例如，要在大屏幕设备上隐藏一个元素，可以这样写：

<div class="invisible lg:visible">只在小屏幕设备上显示</div>

这个元素将在大屏幕设备上隐藏，在其他屏幕尺寸下显示。

参考

• Tailwind CSS - Visibility