Bài 6: Hệ thống màu sắc trong Tailwind

Trong những bài trước, bạn đã bắt đầu làm quen với Tailwind CSS qua cách sử dụng các lớp bố cục như padding, margin, spacing… Bây giờ, hãy thử tưởng tượng bạn đang xây dựng một trang web có nhiều thành phần: tiêu đề, nút bấm, thẻ thông báo, khung báo lỗi… Tất cả những thứ đó đều cần màu sắc để tạo cảm xúc, phân biệt vai trò, và hướng dẫn người dùng.

Ở bài học này, ta sẽ cùng nhau khám phá hệ thống màu sắc mạnh mẽ của Tailwind CSS — vừa trực quan, vừa linh hoạt. Không chỉ đơn giản là red, blue, green… Tailwind cung cấp một bảng màu được chia thành nhiều cấp độ đậm nhạt. Cùng mình đi vào phần chính nhé.

---

Màu sắc trong Tailwind hoạt động ra sao?

Tailwind sử dụng hệ thống tên màu có cấu trúc:

📋 Copy[color]-[level]

Trong đó:

• color: tên màu (ví dụ: gray, blue, red, green, yellow…)
• level: cấp độ đậm nhạt, từ 50 đến 900

Bạn có thể hình dung 50 là màu rất nhạt, còn 900 là rất đậm.

Ví dụ:

📋 Copy<div class="bg-blue-100 text-blue-800 p-4">
  Đây là một thông báo màu xanh
</div>

Ở đây:

• bg-blue-100: nền xanh nhạt
• text-blue-800: chữ xanh đậm

Với hai class này, bạn đã dễ dàng phối màu có độ tương phản vừa phải.

---

Câu chuyện về màu: vì sao Tailwind dùng cấp độ?

Thử nghĩ lại lúc bạn viết CSS truyền thống. Mỗi khi muốn màu xanh đậm hơn, bạn phải nhớ mã hex kiểu #1a73e8, hoặc mở bảng chọn màu để dò. Với Tailwind, bạn chỉ cần tăng số: từ blue-300 lên blue-600, là màu tự đậm lên rõ ràng.

Không chỉ trực quan, hệ thống này còn giúp bạn:

• Thiết kế theo hệ thống (systematic)
• Dễ chỉnh sửa đồng loạt
• Dễ đọc code, dễ hiểu ngay cả với người mới

---

Các nhóm màu mặc định

Tailwind cung cấp hàng chục nhóm màu. Một số nhóm phổ biến:

Nhóm màu	Ví dụ
Gray	gray-100, gray-500, gray-900
Red	red-100, red-600, red-800
Blue	blue-50, blue-500, blue-900
Green	green-200, green-600, green-800
Yellow	yellow-100, yellow-500, yellow-700
Purple	purple-200, purple-700, purple-900
Pink	pink-100, pink-600, pink-800
Indigo	indigo-100, indigo-500, indigo-900

Nếu bạn dùng CDN, bạn có thể xem bảng màu đầy đủ tại https://tailwindcss.com/docs/customizing-colors

---

Áp dụng màu vào giao diện

Bạn có thể áp dụng màu cho nhiều thuộc tính khác nhau thông qua class Tailwind:

Thuộc tính	Cú pháp lớp
Màu nền	bg-*
Màu chữ	text-*
Màu viền	border-*
Màu khi hover	hover:bg-*, hover:text-*
Màu khi focus	focus:ring-*, focus:border-*
Màu bóng	shadow-*, shadow-color-* (plugin)

Ví dụ:

📋 Copy<button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded">
  Xóa dữ liệu
</button>

Ở đây, nút có nền đỏ đậm (red-500), khi rê chuột vào (hover) sẽ thành đỏ hơn (red-600), giúp tạo hiệu ứng trực quan.

---

Một số ví dụ phối màu phổ biến

Mẫu 1: Thông báo thành công

📋 Copy<div class="bg-green-100 text-green-800 p-4 rounded">
  Giao dịch thành công
</div>

Mẫu 2: Cảnh báo

📋 Copy<div class="bg-yellow-100 text-yellow-700 p-4 rounded">
  Vui lòng kiểm tra lại thông tin
</div>

Mẫu 3: Lỗi nghiêm trọng

📋 Copy<div class="bg-red-100 text-red-700 p-4 rounded">
  Có lỗi xảy ra trong hệ thống
</div>

Bạn thấy không? Chỉ vài class là bạn đã tạo ra các khối giao diện mang màu sắc ý nghĩa — và dễ đọc, dễ duy trì.

---

Có thể tùy biến màu không?

Câu trả lời là: Có.

Nếu bạn dùng phiên bản build (không phải CDN), bạn có thể mở file tailwind.config.js và thêm hoặc sửa màu:

📋 Copymodule.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#1e3a8a',
          light: '#3b82f6',
          dark: '#1e40af'
        }
      }
    }
  }
}

Sau đó, dùng trong HTML như:

📋 Copy<div class="bg-brand text-white">
  Màu thương hiệu tùy chỉnh
</div>

---

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

Class	Ý nghĩa
bg-blue-500	Nền màu xanh cấp 500
text-red-700	Màu chữ đỏ cấp 700
hover:bg-green-600	Màu nền khi hover là xanh đậm
border-yellow-300	Viền vàng cấp 300
focus:ring-purple-400	Vòng sáng màu tím khi focus

---

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

• Tailwind dùng hệ thống màu có cấp độ rõ ràng từ nhạt đến đậm.
• Bạn dễ dàng phối màu cho chữ, nền, viền, hover, focus chỉ với một class.
• Với cấu trúc thống nhất và hệ thống, việc sử dụng màu trở nên rất nhanh và chuyên nghiệp.
• Nếu cần màu riêng cho dự án, bạn hoàn toàn có thể mở rộng bảng màu qua cấu hình.

Màu sắc đẹp là chưa đủ — chữ viết cũng cần rõ ràng, cân đối và dễ đọc. Ở bài sau, ta sẽ học cách điều chỉnh font, size, trọng lượng (bold), line-height và spacing để cải thiện trải nghiệm người dùng qua văn bản.