Tailwind CSS provides utilities to control whether an element is visible or hidden while preserving its space in the layout.
visible– Makes an element visible.invisible– Hides an element but keeps its space in the layout.
To completely remove an element from the layout, use the hidden utility, which applies display: none.
Tailwind CSS Visibility Classes
| Class | CSS Property | Description |
|---|---|---|
invisible | visibility: hidden; | Hides an element while preserving its space in the layout. |
visible | visibility: visible; | Makes an element visible. |
1. invisible Class
The invisible utility hides an element from view while preserving the space occupied by that element in the document layout.
Syntax
<element class="invisible">...</element>Example
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Tailwind CSS Visibility</title>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="mt-5 text-4xl font-bold text-green-600">
GeeksforGeeks
</h1>
<p class="mt-2">
Tailwind CSS Visibility Class
</p>
<div class="mt-5 flex justify-evenly">
<div class="h-12 w-24 bg-green-700">1</div>
<div class="invisible h-12 w-24 bg-green-600">2</div>
<div class="h-12 w-24 bg-green-500">3</div>
<div class="h-12 w-24 bg-green-400">4</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
2. visible Class
The visible utility makes an element visible. It applies the CSS declaration visibility: visible.
Syntax
<element class="visible">...</element>
Example
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Tailwind CSS Visibility</title>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="mt-5 text-4xl font-bold text-green-600">
GeeksforGeeks
</h1>
<p class="mt-2">
Tailwind CSS Visibility Class
</p>
<div class="mt-5 flex justify-evenly">
<div class="h-12 w-24 bg-green-700">1</div>
<div class="visible h-12 w-24 bg-green-600">2</div>
<div class="h-12 w-24 bg-green-500">3</div>
<div class="h-12 w-24 bg-green-400">4</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->