Tailwind CSS - Visibility

Tailwind CSS Visibility 是一个实用程序类，它提供了控制元素可见性的措施。

Tailwind CSS Visibility 类

以下是 Tailwind CSS Visibility 类的列表，这些类是用于控制元素可见性的实用程序。

Tailwind CSS 可见性类的功能

• visible: 此类替换了 CSS 中用于使元素可见的 visibility: visible; 属性。
• invisible: 此类替换了 CSS 中用于隐藏元素的 visibility: hidden; 属性，但仍会占用元素的空间。
• collapse: 此类替换了 CSS 中 visibility: crash; 属性。此类用于使元素隐藏，并且不占用 DOM 空间。也用于在使用表格元素时删除表格的行、列、行组和列组。

Tailwind CSS Visibility 类示例

以下示例将说明 Tailwind CSS Visibility 类的实用功能。

Tailwind CSS Visible 类

以下示例说明了 Tailwind CSS Visible 类的用法。

示例

<!DOCTYPE html> 
<html> 
<head> 
        <script src="https://cdn.tailwindcss.com"></script>
</head> 
<body class="p-8"> 
    <h2 class="text-3xl mb-4">
        Tailwind CSS Visible Class
    </h2>
    <div class="flex flex-row justify-around"> 
        <div class="bg-lime-400 w-24 h-20 ">1</div> 
        <div class="visible bg-lime-200 w-24 h-20">2</div> 
        <div class="bg-lime-400 w-24 h-20">3</div> 
    </div> 
</body> 
</html>

Tailwind CSS Invisible 类

以下示例演示了 Tailwind CSS Invisible 类的用法。

示例

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head> 
<body class="p-8"> 
    <h2 class="text-3xl mb-4">
        Tailwind CSS Invisible Class
    </h2>
    <div class="flex flex-row justify-around"> 
        <div class="bg-lime-400 w-24 h-20 ">1</div> 
        <div class="invisible bg-lime-200 w-24 h-20">2</div> 
        <div class="bg-lime-400 w-24 h-20">3</div> 
    </div> 
</body> 
</html>

Tailwind CSS Collapse 类

以下示例演示了 Tailwind CSS Collapse 类的用法。

示例

<!DOCTYPE html> 
<html> 
<head> 
        <script src="https://cdn.tailwindcss.com"></script>
</head> 
<body class="p-8"> 
    <h2 class="text-3xl mb-4">
        Tailwind CSS Collapse Class
    </h2>
    <div class="flex flex-row justify-around"> 
        <div class="bg-lime-400 w-24 h-20 ">1</div> 
        <div class="collapse bg-lime-200 w-24 h-20">2</div> 
        <div class="bg-lime-400 w-24 h-20">3</div> 
    </div> 
</body> 
</html>

表格元素上的 Tailwind CSS Collapse 类

以下示例说明了如何在表格元素上使用 Tailwind CSS Collapse 类。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Collapse Class on Table Element
    </h2>
    <table class="w-full bg-green-300 
                border-2 border-black">
        <tr>
            <td class="border-2 border-black 
                        p-2 text-lg text-left">
                visible
            </td>
            <td class="border-2 border-black 
                        p-2 text-lg text-left">
                hidden
            </td>
            <td class="border-2 border-black 
                        p-2 text-lg text-left collapse">
                collapse
            </td>
        </tr>
        <tr>
            <td class="border-2 border-black 
                        p-2 text-lg text-left">
                initial
            </td>
            <td class="border-2 border-black 
                        p-2 text-lg text-left">
                inherit
            </td>
            <td class="border-2 border-black 
                        p-2 text-lg text-left">
                revert
            </td>
        </tr>
    </table>
</body>
</html>