Bài 15: Làm việc với background và border trong Tailwind CSS

Chúng ta tiếp tục với bài 15, bước vào phần “trang trí” cho layout bằng cách tùy chỉnh nền và viền. Đây là một trong những cách dễ nhất để làm cho giao diện trực quan hơn, rõ ràng hơn và dễ dùng hơn.

Sau khi đã xây dựng bố cục và điều chỉnh kích thước phần tử, bước tiếp theo trong thiết kế là tô điểm cho giao diện bằng màu nền, viền, hiệu ứng gradient… Những yếu tố này tuy nhỏ nhưng lại có ảnh hưởng lớn đến trải nghiệm người dùng.

Trong Tailwind CSS, bạn có thể làm điều đó dễ dàng với những class như bg-blue-500, border, border-gray-300, bg-gradient-to-r, v.v.

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

• Tùy chỉnh màu nền cho phần tử
• Áp dụng gradient
• Thêm border, điều chỉnh độ dày, màu và vị trí
• Kết hợp với responsive và trạng thái hover

---

1. Thêm màu nền – bg-*

Tailwind dùng hệ thống màu theo cú pháp: bg-{màu}-{mức độ}
Ví dụ: bg-blue-500, bg-red-100, bg-gray-900

📋 Copy<div class="bg-yellow-200 p-4 rounded">
  Nền vàng nhạt – bg-yellow-200
</div>

Class	Kết quả
bg-blue-100	Màu xanh rất nhạt
bg-blue-500	Màu xanh vừa phải (thường dùng)
bg-blue-900	Màu xanh rất đậm

Bạn có thể xem danh sách màu tại https://tailwindcss.com/docs/customizing-colors

---

2. Gradient – bg-gradient-to-*

Tailwind hỗ trợ gradient theo hướng:

• to-r: sang phải
• to-l: sang trái
• to-b: xuống dưới
• to-t: lên trên

Cùng với from-*, via-*, to-* để định nghĩa màu chuyển tiếp.

📋 Copy<div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-white p-6 rounded">
  Gradient từ tím sang đỏ
</div>

---

3. Border – viền quanh phần tử

Class	Tác dụng
border	Thêm viền 1px mặc định
border-2, border-4	Tăng độ dày viền
border-red-500	Màu viền
border-t, border-b, border-l, border-r	Viền từng cạnh

📋 Copy<div class="border border-gray-400 p-4 rounded">
  Tôi có viền xám
</div>

<div class="border-2 border-blue-500 p-4 rounded">
  Viền dày 2px màu xanh
</div>

Viền một bên:

📋 Copy<div class="border-l-4 border-green-600 pl-4">
  Viền bên trái màu xanh đậm
</div>

---

4. Kết hợp với hover và trạng thái

Bạn có thể thay đổi nền/viền khi rê chuột bằng các prefix như hover:

📋 Copy<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  Di chuột vào tôi
</button>

Tương tự, bạn có thể kết hợp với focus:, active: để làm nút tương tác.

---

Thực hành nhỏ: Tạo thông báo với màu nền và viền

📋 Copy<div class="bg-green-100 border border-green-400 text-green-800 px-4 py-3 rounded">
  <strong>Thành công!</strong> Dữ liệu đã được lưu.
</div>

Bạn có thể đổi màu sang đỏ hoặc vàng để tạo thông báo lỗi hoặc cảnh báo.

---

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

Class	Tác dụng
bg-*	Đặt màu nền
bg-gradient-to-r	Gradient nền
from-*, to-*, via-*	Màu bắt đầu, kết thúc và trung gian
border, border-2, border-4	Thêm viền và chỉnh độ dày
border-color	Màu viền
border-t, border-b…	Viền riêng từng cạnh
hover:bg-*, hover:border-*	Thay đổi khi hover

---

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

• Tailwind giúp bạn nhanh chóng tạo nền, viền, hiệu ứng gradient mà không cần viết CSS.
• Các class rất trực quan, dễ kết hợp với hover/focus để tăng tính tương tác.
• Việc dùng màu sắc hợp lý giúp nội dung dễ đọc, phân biệt và hướng sự chú ý người dùng.

---

Giờ bạn đã biết cách “tô màu”, tiếp theo chúng ta sẽ học cách làm giao diện trở nên mềm mại và có chiều sâu hơn bằng:

• Bo góc (rounded)
• Đổ bóng (shadow)
• Kết hợp hiệu ứng hover để “nổi bật” từng khối

Tất cả sẽ được trình bày trong bài 16: Bo góc, shadow và hiệu ứng đổ bóng trong Tailwind CSS.

---

Đến đây, layout của bạn đã bắt đầu “có hồn” hơn. Hẹn bạn trong bài tiếp theo để thêm một lớp tinh tế nữa nhé!