Bài 16: Bo góc, shadow và hiệu ứng đổ bóng trong Tailwind CSS

Trong thiết kế giao diện, có những chi tiết nhỏ nhưng mang lại cảm giác tinh tế và hiện đại — đó là bo góc và đổ bóng.
Một khối vuông sắc cạnh sẽ trở nên mềm mại hơn khi được bo tròn. Một card phẳng lỳ sẽ trở nên nổi bật hơn khi có đổ bóng.

Trong Tailwind CSS, bạn chỉ cần dùng các class như rounded, shadow-md, hover:shadow-lg… để tạo hiệu ứng trực quan này.

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

• Bo góc phần tử theo nhiều mức độ
• Tạo đổ bóng từ nhẹ đến đậm
• Kết hợp hiệu ứng với trạng thái hover
• Áp dụng nhanh mà không cần viết CSS riêng

---

1. Bo góc – rounded

Class	Tác dụng
rounded-none	Không bo góc
rounded-sm	Bo góc nhẹ
rounded	Bo góc mặc định
rounded-md	Bo góc vừa phải
rounded-lg	Bo góc lớn
rounded-full	Bo tròn hoàn toàn (hình tròn)
rounded-t-lg	Bo góc phía trên
rounded-b-md	Bo góc phía dưới

Ví dụ:

📋 Copy<div class="bg-blue-200 p-4 rounded-lg">
  Khối có bo góc lớn
</div>

📋 Copy<img src="https://via.placeholder.com/150" class="rounded-full" />

---

2. Đổ bóng – shadow-*

Tailwind cung cấp nhiều cấp độ shadow:

Class	Tác dụng
shadow-sm	Bóng nhẹ
shadow	Bóng mặc định
shadow-md	Bóng vừa phải
shadow-lg	Bóng lớn
shadow-xl	Bóng đậm hơn
shadow-2xl	Bóng cực đậm
shadow-inner	Bóng vào phía trong
shadow-none	Không có bóng

Ví dụ:

📋 Copy<div class="bg-white p-6 rounded shadow-md">
  Card có đổ bóng trung bình
</div>

📋 Copy<button class="px-4 py-2 bg-indigo-500 text-white rounded shadow hover:shadow-lg transition">
  Di chuột để thấy đổ bóng lớn hơn
</button>

Ở đây:

• hover:shadow-lg: khi rê chuột, đổ bóng đậm hơn
• transition: giúp hiệu ứng mượt mà

---

3. Kết hợp rounded + shadow

📋 Copy<div class="bg-white p-6 rounded-lg shadow-lg max-w-sm mx-auto text-center">
  <h3 class="text-xl font-bold mb-2">Giao diện nhẹ nhàng</h3>
  <p class="text-gray-600">Bo góc và đổ bóng giúp layout trở nên hiện đại và dễ nhìn hơn.</p>
</div>

---

So sánh với CSS thuần

Ý tưởng	CSS truyền thống	Tailwind CSS
Bo góc 8px	border-radius: 8px;	rounded-md
Hình tròn	border-radius: 9999px;	rounded-full
Bóng trung bình	box-shadow: ...	shadow
Bóng đậm khi hover	:hover { box-shadow: ... }	hover:shadow-lg

---

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

Class	Tác dụng
rounded, rounded-lg, rounded-full	Bo góc với nhiều mức
shadow, shadow-md, shadow-xl	Đổ bóng nhiều cấp
hover:shadow-*	Tương tác khi rê chuột
transition	Làm mượt hiệu ứng

---

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

• Bo góc (rounded) giúp layout trở nên thân thiện hơn với người dùng.
• Hiệu ứng đổ bóng (shadow) tạo cảm giác chiều sâu, giúp phần tử “nổi bật”.
• Việc kết hợp hover: và transition tạo ra hiệu ứng tương tác hiện đại mà không cần JavaScript.

---

Giao diện của bạn giờ đã có bố cục, kích thước, màu sắc và hiệu ứng đẹp. Nhưng còn một yếu tố quan trọng nữa — khoảng cách giữa các thành phần.

Trong bài 17, chúng ta sẽ tìm hiểu:

• Margin và padding nâng cao
• Cách Tailwind xử lý khoảng cách dọc/ngang
• Bộ class space-*, gap-* và cách áp dụng hợp lý

---

Hẹn bạn trong bài 17: Hệ thống spacing nâng cao trong Tailwind CSS — để làm cho giao diện thoáng, gọn và dễ nhìn hơn!