Tailwind CSS - 可见性

Tailwind CSS 可见性 是一种实用程序类，提供控制元素可见性的方法。

Tailwind CSS 可见性类

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

类	CSS 属性
visible	visibility: visible;
invisible	visibility: hidden;
collapse	visibility: collapse;

Tailwind CSS 可见性类的功能

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 可见性类示例

以下示例将说明 Tailwind CSS 可见性类实用程序。

Tailwind CSS Visible 类

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

示例

Open Compiler

<!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 类的用法。

示例

Open Compiler

<!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 类的用法。

示例

Open Compiler

<!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 类在表格元素上的用法。

示例

Open Compiler

<!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>

打印页面