Bài 13: Các lớp hiển thị – display, visibility, z-index trong Tailwind CSS

Đôi khi, vấn đề không phải là bố cục hiện ra như thế nào, mà là nó có được hiển thị hay không. Một nút bấm có thể ẩn đi ở mobile, một thông báo có thể tạm thời biến mất, hay một menu cần nổi lên trên mọi thành phần khác — đó là lúc bạn cần sử dụng đến lớp hiển thị và z-index.

Trong CSS truyền thống, bạn viết display: none, visibility: hidden, z-index: 9999, nhưng trong Tailwind CSS, tất cả được đơn giản hóa thành các utility class rõ ràng và dễ nhớ.

👉 Xem thêm bài học sử dụng display trong môn học CSS.

Bài học hôm nay sẽ giúp bạn:

• Điều khiển phần tử hiển thị hoặc ẩn
• Làm quen với các chế độ hiển thị như block, inline, flex, v.v.
• Quản lý z-index để sắp xếp thứ tự hiển thị chồng lớp

---

Các class hiển thị (display)

Class	Tác dụng tương đương CSS
block	display: block
inline	display: inline
inline-block	display: inline-block
flex	display: flex
inline-flex	display: inline-flex
grid	display: grid
hidden	display: none

Ví dụ:

📋 Copy<div class="block bg-blue-100 p-4 mb-2">Tôi là block</div>
<span class="inline bg-green-100 p-2">Tôi là inline</span>

📋 Copy<div class="md:hidden">Chỉ hiển thị trên mobile</div>
<div class="hidden md:block">Chỉ hiển thị trên desktop</div>

---

Các class ẩn / hiện (visibility)

Class	Tác dụng
visible	visibility: visible
invisible	visibility: hidden

Khác với display: none, khi dùng invisible, phần tử vẫn chiếm chỗ trong layout.

📋 Copy<p class="visible">Tôi hiển thị</p>
<p class="invisible">Tôi bị ẩn nhưng vẫn chiếm chỗ</p>

---

Quản lý thứ tự hiển thị với z-index

Trong Tailwind, bạn dùng các class dạng z-[number] để điều khiển lớp hiển thị chồng lên nhau.

Class	Tác dụng tương đương CSS
z-0	z-index: 0
z-10	z-index: 10
z-20, z-30…	z-index: 20, 30, …
z-auto	z-index: auto
z-[9999]	z-index: 9999 (tùy chỉnh)

Ví dụ đơn giản:

📋 Copy<div class="relative z-10 bg-white p-4 shadow">Nằm trên</div>
<div class="relative z-0 bg-gray-300 p-4 mt-[-40px]">Nằm dưới</div>

Ở đây, phần tử có z-10 sẽ nằm trên phần tử z-0 khi bị chồng lên.

---

Thực hành: Tạo nút bật/ẩn menu

📋 Copy<button onclick="document.getElementById('menu').classList.toggle('hidden')" class="bg-blue-500 text-white px-4 py-2 rounded">
  Mở menu
</button>

<div id="menu" class="hidden bg-white shadow p-4 mt-2">
  <ul>
    <li>Trang chủ</li>
    <li>Giới thiệu</li>
    <li>Liên hệ</li>
  </ul>
</div>

Ở đây:

• hidden: ẩn menu ban đầu
• Toggle bằng JavaScript: bật class hidden để ẩn/hiện

---

So sánh Tailwind với CSS thuần

Tác vụ	CSS truyền thống	Tailwind CSS
Hiện phần tử	display: block	block
Ẩn phần tử	display: none	hidden
Làm mờ nhưng vẫn chiếm chỗ	visibility: hidden	invisible
Cho lớp trên cùng	z-index: 9999	z-[9999]
Ẩn trên desktop	@media query + display	md:hidden

---

Tổng kết kiến thức

Class	Tác dụng chính
block, inline, flex, grid	Kiểm soát chế độ hiển thị
hidden	Ẩn hoàn toàn
invisible	Ẩn nhưng vẫn chiếm không gian
z-0, z-10, …, z-[9999]	Quản lý thứ tự chồng lớp
md:hidden, sm:block	Responsive hiển thị/ẩn

---

Tóm tắt bài học

• Tailwind CSS giúp bạn ẩn/hiện phần tử rất dễ dàng bằng hidden, visible, invisible.
• Các class như block, flex, inline giúp bạn điều khiển kiểu hiển thị rõ ràng.
• Bạn có thể quản lý thứ tự hiển thị bằng z-index thông qua các class z-*.
• Khi kết hợp với các breakpoint như md:, bạn có thể ẩn/hiện phần tử theo kích thước màn hình một cách dễ dàng.

---

Giờ bạn đã biết hiển thị – ẩn – chồng lớp, nhưng trong thực tế, bạn cũng cần điều chỉnh kích thước các phần tử:

• Cho phần tử rộng 100%
• Giới hạn chiều cao ảnh
• Đặt chiều rộng tối đa cho bài viết
• Hay đảm bảo responsive trong các khung khác nhau

Tất cả những việc đó liên quan đến chiều rộng, chiều cao, min/max — và chúng ta sẽ học trong bài 14.

---

Hẹn bạn trong bài 14: Chiều rộng, chiều cao và giới hạn (min/max) trong Tailwind CSS — nơi chúng ta nắm quyền kiểm soát kích thước mọi thành phần trong layout!