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 中不佔用任何空間。在使用表格元素時，也可用於刪除表格行、列、行組和列組。

Tailwind CSS 可見性類示例

以下示例將說明 Tailwind CSS 可見性類實用程式。

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>

列印頁面