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ụ:
<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ụ:
<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:
<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ụ:
<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 đamx-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
<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!
Thảo luận