Tailwind CSS - Visibility

Previous
Quiz
Next

Tailwind CSS Visibility is a utility class that provides measures to control the visibility of elements.

Tailwind CSS Visibility Classes

The following is the list of Tailwind CSS Visibility classes, which are utilities for controlling element's visibility.

Class CSS Properties
visible visibility: visible;
invisible visibility: hidden;
collapse visibility: collapse;

Functionality of Tailwind CSS Visibility Classes

  • visible: This class replaces the CSS visibility: visible; property used to make the element visible.
  • invisible: This class replaces the CSS visibility: hidden; property used to hide the element, but it will still take its space.
  • collapse: This class replaces the CSS visibility: collapse; property. This class is used to make elements hidden and take no space in the DOM. Also used to remove table rows, columns, row groups, and column groups while using table elements.

Tailwind CSS Visibility Class Examples

The following examples will illustrate the Tailwind CSS Visibility class utility.

Tailwind CSS Visible Class

The below example is illustrating the use of Tailwind CSS Visible Class.

Example

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

The below example is illustrating the use of Tailwind CSS Invisible Class.

Example

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

The below example is illustrating the use of Tailwind CSS Collapse Class.

Example

<!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 Class on Table Element

The below example is illustrating the use of Tailwind CSS Collapse Class on table element.

Example

<!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>
Print Page
Previous
Next