Bài 25: Responsive visibility và breakpoint nâng cao trong Tailwind CSS

Chúng ta đang đi đúng lộ trình và bài học hôm nay sẽ giúp bạn làm chủ hiển thị có điều kiện, một kỹ năng cực kỳ quan trọng để giao diện trông gọn gàng và thông minh trên mọi thiết bị.

Có bao giờ bạn muốn ẩn một khối nào đó chỉ trên mobile, hoặc chỉ hiện ra khi màn hình đủ lớn không?
Ví dụ:

• Trên mobile: ẩn sidebar để tiết kiệm không gian
• Trên desktop: hiện cả menu đầy đủ
• Trên tablet: hiện nút điều hướng riêng

Đó là lúc Tailwind phát huy sức mạnh responsive một cách cực kỳ mượt mà.
Hôm nay bạn sẽ học:

• Cách sử dụng các lớp hiển thị: block, inline, hidden, flex, v.v.
• Kết hợp với breakpoint như md:block, lg:hidden
• Một số mẹo để làm cho giao diện gọn gàng, dễ kiểm soát hơn

---

Các class hiển thị cơ bản

Tailwind cung cấp nhiều lớp giúp bạn điều khiển kiểu hiển thị của phần tử:

Class	Tác dụng
block	Hiển thị kiểu block
inline	Hiển thị cùng dòng
flex	Biến phần tử thành flexbox
inline-flex	Flex nhưng nằm trên cùng dòng
hidden	Ẩn hoàn toàn phần tử

Tương đương với display: block, display: flex, v.v. trong CSS thuần.

---

Breakpoint trong Tailwind

Tailwind mặc định có các breakpoint sau:

Prefix	Kích thước từ… trở lên
sm:	≥ 640px
md:	≥ 768px
lg:	≥ 1024px
xl:	≥ 1280px
2xl:	≥ 1536px

Cách đọc: Tailwind hoạt động theo mobile first.
Bạn style cho mobile trước, rồi ghi đè ở màn hình lớn hơn.

---

Ví dụ 1: Hiện sidebar chỉ trên desktop

📋 Copy<aside class="hidden lg:block w-64 bg-gray-100 p-4">
  Sidebar dành cho desktop
</aside>

Giải thích:

• Mặc định hidden (mobile, tablet)
• Từ lg trở lên: hiện lại bằng block

---

Ví dụ 2: Hiện nút menu chỉ trên mobile

📋 Copy<button class="block md:hidden px-4 py-2 bg-blue-600 text-white rounded">
  Menu
</button>

• Trên mobile: hiện nút
• Trên md trở lên: ẩn

Bạn có thể dùng cách này để làm menu hamburger trên mobile và menu đầy đủ trên desktop.

---

Ví dụ 3: Responsive layout với điều kiện hiển thị

📋 Copy<div class="flex flex-col md:flex-row">
  <div class="md:w-2/3 p-4 bg-white">
    Nội dung chính
  </div>
  <div class="hidden md:block md:w-1/3 p-4 bg-gray-100">
    Sidebar
  </div>
</div>

• Trên mobile: chỉ có nội dung chính (full width)
• Trên md: chia 2 cột, sidebar hiện ra

---

So sánh các lớp hiển thị

Mục đích	Tailwind class
Ẩn trên mọi thiết bị	hidden
Hiện lại từ md trở lên	md:block, md:flex
Ẩn trên desktop	lg:hidden, xl:hidden
Hiện chỉ trên mobile	block md:hidden
Flex responsive	flex-col md:flex-row

---

Một số mẹo nhỏ

• Khi làm navbar, thường dùng:
  block lg:hidden → hiện menu trên mobile
  hidden lg:flex → hiện menu đầy đủ trên desktop
• Nếu phần tử phải “giữ chỗ” khi ẩn, bạn có thể dùng invisible thay vì hidden
  (invisible làm phần tử ẩn nhưng vẫn chiếm không gian)
• Có thể kết hợp với transition để làm hiệu ứng ẩn/hiện mềm mại (ví dụ: accordion, dropdown)

---

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

Kỹ năng	Class Tailwind tương ứng
Ẩn phần tử	hidden
Responsive display	md:block, lg:hidden, v.v.
Mobile-first layout	Style mặc định → ghi đè bằng breakpoint
Hiện/ẩn logic layout	Kết hợp flex, block, hidden

---

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

• Tailwind giúp bạn kiểm soát hiển thị theo kích thước màn hình một cách chính xác và dễ đọc.
• Bạn có thể làm ra layout “tự điều chỉnh” mà không cần media query thủ công.
• Từ nay, chuyện ẩn menu, hiện sidebar, giấu nút đăng nhập trên mobile… không còn khó khăn nữa.

---

Bài tiếp theo

Sau khi đã làm chủ việc ẩn/hiện nội dung theo màn hình, bạn có thể bắt đầu tùy biến theme – tức là thay đổi màu sắc, font chữ, spacing… theo thương hiệu hoặc phong cách riêng của bạn.

Trong bài 26, bạn sẽ học:

• Cách chỉnh sửa tailwind.config.js
• Thêm màu thương hiệu, font riêng, spacing mới
• Quản lý theme khi làm dự án thực tế

---

Hẹn gặp lại bạn trong bài 26: Tùy biến theme với Tailwind Config – tạo bộ nhận diện riêng cho dự án của bạn.
Chúng ta đang dần tiến vào khu vực nâng cao, nơi bạn thực sự “làm chủ” Tailwind, không chỉ dùng theo mặc định.