Dưới đây là bài viết tiếp theo trong chuỗi hướng dẫn học Tailwind CSS thực chiến, tập trung vào nhóm tiện ích trực quan giúp tạo điểm nhấn cho giao diện: Backgrounds, Border, Shadow, Opacity.
✨ Giới thiệu
Một giao diện web hiện đại không chỉ cần bố cục tốt, chữ dễ đọc – mà còn cần màu sắc hợp lý, viền rõ ràng, đổ bóng tinh tế và độ trong suốt hợp lý để tạo chiều sâu, mức độ nhấn và phân tách các khu vực nội dung.
Tailwind CSS cung cấp hàng loạt utility class để bạn:
- Tạo nền với
bg-* - Tùy chỉnh viền với
border-* - Tạo bóng với
shadow-* - Điều chỉnh độ mờ với
opacity-*
🔹 1. Backgrounds – bg-*
Màu nền
Tailwind sử dụng hệ thống màu tiện dụng:
<div class="bg-blue-500 text-white p-4 rounded">
Nút màu xanh
</div>
| Class | Mô tả |
|---|---|
bg-gray-100 | Màu nền xám nhạt |
bg-red-500 | Màu nền đỏ chính |
bg-green-700 | Màu nền xanh đậm |
hover:bg-blue-700 | Màu nền khi hover |
Gradient (gradient cần plugin hoặc custom thêm)
Hoặc đơn giản:
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-6 text-white">
Gradient bắt mắt
</div>
🔹 2. Borders – border, border-*, rounded-*
Kích thước và màu viền
<div class="border border-gray-300 p-4 rounded">
Khung có viền xám
</div>
| Class | Mô tả |
|---|---|
border | Viền mỏng mặc định |
border-2, border-4 | Tăng độ dày viền |
border-red-500 | Viền màu đỏ |
border-t, border-b-2 | Chỉ viền trên / dưới |
Bo góc – rounded
<div class="rounded-lg">Khung bo góc</div>
| Class | Mô tả |
|---|---|
rounded | Bo nhẹ tất cả góc |
rounded-sm | Bo ít hơn |
rounded-lg | Bo nhiều hơn |
rounded-full | Bo tròn hoàn toàn |
rounded-t-lg | Bo góc trên |
🔹 3. Shadows – shadow-*
Tạo hiệu ứng nổi nhẹ cho UI, thường dùng cho:
- Card
- Modal
- Nút
<div class="shadow p-4 bg-white rounded">
Hộp có đổ bóng mặc định
</div>
| Class | Hiệu ứng |
|---|---|
shadow-sm | Nhẹ |
shadow | Mặc định |
shadow-md | Trung bình |
shadow-lg | Lớn hơn |
shadow-xl | Đậm |
shadow-2xl | Rất đậm |
shadow-none | Không đổ bóng |
📌 Kết hợp với hover: để tạo tương tác:
<button class="shadow hover:shadow-lg transition">Nhấn vào tôi</button>
🔹 4. Opacity – opacity-*
Dùng để làm mờ ảnh, nền, chữ, v.v.
<img src="..." class="opacity-70 hover:opacity-100 transition" />
| Class | Độ mờ (%) |
|---|---|
opacity-0 | 0% (ẩn hoàn toàn) |
opacity-25 | 25% |
opacity-50 | 50% |
opacity-75 | 75% |
opacity-100 | 100% (mặc định) |
✅ Kết hợp tuyệt vời khi muốn nhấn mạnh sự tương tác (hover, focus) hoặc tạo hiệu ứng background overlay (absolute bg-black opacity-40…)
🧠 Thực chiến: Tạo Card có màu, bóng, viền, opacity
htmlSao chépChỉnh sửa<div class="bg-white border border-gray-200 rounded-lg shadow-md p-6 max-w-sm mx-auto hover:shadow-xl transition">
<h3 class="text-xl font-bold text-gray-800 mb-2">Gói Premium</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4">
Truy cập không giới hạn tất cả chức năng nâng cao.
</p>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
Đăng ký ngay
</button>
</div>
✅ Kết luận
Kết hợp linh hoạt các tiện ích về màu nền, đường viền, đổ bóng và độ mờ sẽ giúp bạn:
- Làm nổi bật các thành phần chính
- Tạo chiều sâu cho layout
- Hướng ánh nhìn của người dùng đúng vị trí mong muốn
Với Tailwind CSS, bạn không cần thiết kế phức tạp – chỉ cần hiểu đúng class, UI của bạn sẽ luôn tinh tế và hiện đại.
