Class này chấp nhận hai giá trị trong Tailwind CSS. Nó là một lựa chọn thay thế cho CSS visibility property. Class này dùng để xác định một phần tử có hiển thị hay không. Các phần tử ẩn vẫn chiếm không gian trong tài liệu web. Sử dụng thuộc tính display để loại bỏ hoàn toàn phần tử khỏi trình duyệt.
Visibility (khả năng hiển thị):
- Invisible (ẩn)
- Visible (hiện)
invisible: Class này ẩn phần tử khỏi trang, nhưng vẫn chiếm không gian.
Syntax (cú pháp):
<element class="invisible">...</element>
Example (ví dụ):
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 (kết quả):
visible: Đây là giá trị mặc định. Phần tử được hiển thị bình thường trên trang web.
Syntax (cú pháp):
<element class="visible">...</element>
Example (ví dụ):
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 (kết quả):
