Bài 8: Responsive design trong Tailwind CSS

Khi bạn xây dựng một trang web, người dùng có thể truy cập từ máy tính, máy tính bảng, hoặc điện thoại — với hàng chục kích thước màn hình khác nhau.
Để thiết kế một giao diện linh hoạt, phù hợp với mọi thiết bị, bạn cần áp dụng Responsive Design (thiết kế đáp ứng).

Trong Tailwind CSS, bạn không cần viết media query phức tạp như CSS truyền thống. Thay vào đó, Tailwind sử dụng cú pháp rất đơn giản để áp dụng class theo kích thước màn hình. Trong bài này, bạn sẽ học cách sử dụng hệ thống breakpoint, viết responsive class, và điều chỉnh layout dễ dàng cho nhiều thiết bị.

---

Hồi tưởng một chút về CSS truyền thống

Trong CSS thuần, để thay đổi giao diện cho mobile và desktop, bạn viết media query như sau:

📋 Copy@media (min-width: 768px) {
  .menu {
    display: flex;
  }
}

Viết như vậy khá dài, dễ rối, và khó tái sử dụng.

Với Tailwind? Cùng một hiệu ứng đó, bạn chỉ cần viết:

📋 Copy<div class="block md:flex">...</div>

Ngắn gọn, rõ ràng, trực quan.

---

Cách hoạt động của responsive class trong Tailwind

Tailwind sử dụng prefix (tiền tố) để chỉ định kích thước màn hình áp dụng class.

Cú pháp:

📋 Copy[breakpoint]:[class]

Ví dụ:

📋 Copy<div class="text-base md:text-xl lg:text-2xl">
  Văn bản sẽ lớn dần theo kích thước màn hình
</div>

Trong đó:

Prefix	Kích thước min-width	Thiết bị
sm	≥ 640px	Điện thoại lớn
md	≥ 768px	Tablet ngang
lg	≥ 1024px	Laptop
xl	≥ 1280px	Desktop lớn
2xl	≥ 1536px	Màn hình rất lớn

---

Một ví dụ layout responsive

📋 Copy<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-gray-200 p-4">Cột 1</div>
  <div class="bg-gray-300 p-4">Cột 2</div>
  <div class="bg-gray-400 p-4">Cột 3</div>
</div>

Giải thích:

• Trên mobile: grid-cols-1 → 1 cột
• Trên tablet (md:): 2 cột
• Trên laptop (lg:): 3 cột

Bạn không cần viết media query thủ công — mọi thứ được kiểm soát bằng class ngay trong HTML.

---

Một vài tình huống responsive thường gặp

Trường hợp	Viết với Tailwind
Ẩn trên mobile	hidden sm:block
Căn giữa chỉ trên desktop	text-left lg:text-center
Tăng padding khi màn hình lớn	p-2 md:p-6
Nút dàn hàng ngang khi đủ rộng	flex-col md:flex-row

---

Tương tác nhỏ

Hãy thử đoạn code sau và resize trình duyệt để thấy sự thay đổi:

📋 Copy<div class="p-4 text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl bg-blue-100 rounded">
  Đây là một đoạn văn bản sẽ thay đổi kích thước chữ theo độ rộng màn hình.
</div>

Bạn có thể từ từ kéo nhỏ – kéo rộng cửa sổ trình duyệt để cảm nhận rõ sự linh hoạt.

---

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

Cú pháp	Ý nghĩa
sm:	Áp dụng từ 640px trở lên
md:	Từ 768px trở lên (tablet)
lg:	Từ 1024px trở lên (laptop)
xl:	Từ 1280px trở lên (desktop lớn)
2xl:	Từ 1536px trở lên
md:flex	Chỉ flex khi màn hình từ 768px trở lên
lg:grid-cols-3	Chia 3 cột khi laptop trở lên

---

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

• Tailwind cho phép viết responsive nhanh chóng bằng cách thêm tiền tố như sm:, md:, lg:, v.v.
• Không cần viết media query bằng CSS nữa — chỉ cần dùng class ngay trong HTML.
• Kết hợp với grid, flex, margin/padding… bạn dễ dàng tạo layout phù hợp cho mọi thiết bị.

---

Giờ thì layout của bạn đã phản hồi theo kích thước màn hình. Nhưng nếu bạn muốn tăng tính tương tác — như đổi màu khi rê chuột, sáng viền khi người dùng bấm vào — thì đó là lúc cần dùng pseudo-class như hover, focus, active.

Ở bài 9, bạn sẽ được học cách xử lý những trạng thái đó một cách rõ ràng, dễ nhớ, mà không cần viết CSS riêng.

---

Bạn đã thấy giao diện mình bắt đầu “sống” hơn chưa? Còn một chút nữa là đủ để bạn tự tay xây một giao diện chuyên nghiệp.
Cùng mình khám phá tiếp trạng thái tương tác trong Tailwind ở bài sau nhé!