Bài 14: Chiều rộng, chiều cao và giới hạn (min/max) trong Tailwind CSS

Trong thiết kế web, ngoài việc “bố trí vị trí” thì kích thước của từng thành phần cũng đóng vai trò quan trọng: một hình ảnh cần có chiều rộng cố định, một khối văn bản không được dài quá, hoặc một section phải chiếm đủ chiều cao của màn hình.

Ở CSS truyền thống, bạn dùng width, height, max-width, min-height… nhưng lại phải nhớ đơn vị, tạo class riêng, khá mất công.

Trong Tailwind CSS, bạn chỉ cần áp dụng các class tiện ích như w-1/2, h-screen, max-w-md, min-h-full… và hệ thống sẽ lo phần còn lại.

---

Các nhóm class chính

Tailwind chia class kích thước thành 3 nhóm:

• Chiều rộng (w-*)
• Chiều cao (h-*)
• Giới hạn (min-w-*, max-w-*, min-h-*, max-h-*)

---

1. Chiều rộng – w-*

Class	Ý nghĩa
w-full	Chiều rộng 100%
w-screen	Rộng bằng toàn màn hình
w-1/2	50% chiều rộng của phần tử cha
w-96	24rem (tương đương 384px)
w-auto	Theo nội dung
w-min, w-max	Theo kích thước nhỏ nhất/lớn nhất của nội dung

Ví dụ:

📋 Copy<div class="w-full bg-blue-200 p-4">Chiều rộng 100%</div>
<div class="w-1/2 bg-blue-400 p-4">Chiều rộng 50%</div>
<div class="w-96 bg-blue-600 p-4">Rộng cố định 384px</div>

---

2. Chiều cao – h-*

Class	Ý nghĩa
h-full	100% chiều cao phần tử cha
h-screen	Cao bằng chiều cao màn hình
h-64	Cao 16rem (256px)
h-auto	Chiều cao tự nhiên theo nội dung
h-min, h-max	Tuân theo min-content/max-content

Ví dụ:

📋 Copy<div class="h-64 bg-green-300">Khối có chiều cao 256px</div>

Hoặc tạo màn hình full-page:

📋 Copy<section class="h-screen bg-gray-100 flex items-center justify-center">
  <p class="text-xl">Tôi được căn giữa theo chiều dọc!</p>
</section>

---

3. Giới hạn kích thước – max-*, min-*

Class	Tác dụng
max-w-xs → max-w-7xl	Giới hạn chiều rộng tối đa
min-w-full	Chiều rộng tối thiểu là 100%
max-h-screen	Giới hạn chiều cao theo màn hình
min-h-0, min-h-full	Chiều cao tối thiểu

Ví dụ:

📋 Copy<article class="max-w-xl mx-auto p-4">
  <h2 class="text-2xl font-bold">Bài viết</h2>
  <p class="text-gray-600">Nội dung giới hạn trong 640px và căn giữa</p>
</article>

Ở đây:

• max-w-xl: khống chế độ rộng tối đa
• mx-auto: căn giữa theo chiều ngang

---

Thực hành nhỏ: Tạo card có chiều rộng cố định và tự co giãn

📋 Copy<div class="w-full max-w-md bg-white rounded shadow p-6 mx-auto">
  <h3 class="text-xl font-semibold mb-2">Khóa học Tailwind</h3>
  <p class="text-gray-600">Học từ cơ bản đến nâng cao, có ví dụ rõ ràng, dễ nhớ và ứng dụng được ngay.</p>
</div>

• w-full: chiếm toàn bộ chiều rộng cha nếu có
• max-w-md: tối đa là 28rem (~448px)
• mx-auto: căn giữa khối này trong container

---

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

Ý tưởng thiết kế	CSS thuần	Tailwind CSS
Rộng 100%	width: 100%	w-full
Chiều cao màn hình	height: 100vh	h-screen
Giới hạn max-width	max-width: 640px	max-w-xl
Rộng 50%	width: 50%	w-1/2
Căn giữa chiều ngang	margin: 0 auto	mx-auto

---

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

Class	Tác dụng
w-full, h-full	100% chiều rộng / chiều cao
w-1/2, h-64	Rộng 50%, cao 256px
w-screen, h-screen	Bằng toàn bộ màn hình
max-w-*, min-h-*	Giới hạn chiều rộng / cao
mx-auto	Căn giữa theo chiều ngang

---

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

• Tailwind giúp bạn kiểm soát kích thước phần tử rất trực quan bằng các class w-*, h-*, max-w-*, min-h-*…
• Bạn có thể tạo layout linh hoạt, responsive mà không cần viết CSS riêng.
• Đây là công cụ cực kỳ hữu ích khi làm layout sản phẩm, bài viết, hoặc chia cột theo thiết kế cụ thể.

---

Bạn đã kiểm soát được vị trí, hiển thị và kích thước — giờ là lúc làm đẹp thêm giao diện.

Trong bài 15, chúng ta sẽ học cách:

• Tùy chỉnh nền (background-color, gradient, image)
• Làm viền (border, border-color, border-width)
• Tăng tính tương tác và thẩm mỹ cho từng khối

Tất cả sẽ có trong bài 15: Làm việc với background và border trong Tailwind CSS.

---

Bạn đã “xây xong khung nhà”, giờ là lúc “sơn tường – trang trí” — hẹn bạn trong bài tiếp theo!