Tailwind CSS Visibility

In tailwind CSS, this class accepts two values. It's a replacement for the CSS visibility property. This class specifies whether an element in a web document is visible or not, yet hidden elements take up space in the text. To remove, hide, or delete an element from the browser, use the display property.

Visibility

It is classified as:

• Invisible
• Visible

Invisible

This class is used to make an element invisible/hidden on the page, although it takes up space in the document.

Syntax:

<element class="invisible">...</element>

Example:

<!DOCTYPE html>
<html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
        Tutorial and Example
    </h1>
    <b>Visibility Class - Tailwind CSS </b>
    <div id="main" class="flex flex-row justify-evenly">
        <div class="bg-red-700 w-24 h-12">1</div>
        <div class="invisible bg-red-600 w-24 h-12">2</div>
        <div class="bg-red-500 w-24 h-12">3</div>
        <div class="bg-red-400 w-24 h-12">4</div>
    </div>
</body>
</html>

Output:

Visible

It is the default value. The element is displayed or visible in the web document as it should be.

Syntax

<element class="visible">...</element>

Example:

<!DOCTYPE html>
<html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
        Tutorial and Example
    </h1>
    <b>Visibility Class - Tailwind CSS </b>
    <div id="main" class="flex flex-row justify-evenly">
        <div class="bg-red-700 w-24 h-12">1</div>
        <div class="visible bg-red-600 w-24 h-12">2</div>
        <div class="bg-red-500 w-24 h-12">3</div>
        <div class="bg-red-400 w-24 h-12">4</div>
    </div>
</body>
</html>

Output: