Open In App

Tailwind CSS Visibility

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts two values in tailwind CSS. It is the alternative to the CSS visibility property. This class is used to specify whether an element is visible or not in a web document but the hidden elements take up space in the web document. Use the display property to remove or hide and delete an element from the browser.

Visibility:

  • Invisible
  • Visible

invisible: This class is used to hide the element from the page but takes up space in the document

Syntax:

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

Example:

HTML




<!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-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Visibility Class</b
    <div id="main" class="flex flex-row justify-evenly"
        <div class="bg-green-700 w-24 h-12">1</div
        <div class="invisible bg-green-600 w-24 h-12">2</div
        <div class="bg-green-500 w-24 h-12">3</div
        <div class="bg-green-400 w-24 h-12">4</div
    </div
</body
  
</html>


Output:

visible: It is the default value. The element is shown or visible normally in the web document.

Syntax:

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

Example:

HTML




<!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-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Visibility Class</b
    <div id="main" class="flex flex-row justify-evenly"
        <div class="bg-green-700 w-24 h-12">1</div
        <div class="visible bg-green-600 w-24 h-12">2</div
        <div class="bg-green-500 w-24 h-12">3</div
        <div class="bg-green-400 w-24 h-12">4</div
    </div
</body
  
</html>


Output:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads