Cách quản lý màu sắc hệ thống thiết kế trong Tailwind CSS

TailwindCSS CSS Hệ thống thiết kế Cài đặt
Kết luận

Thêm bảng màu riêng của bạn vào phần extend trong tailwind.config.ts. Bí quyết để dễ bảo trì là không ghi đè màu mặc định mà hãy định nghĩa các màu đặc thù của dự án (như brand, primary, v.v.).

Ví dụ cài đặt cơ bản

Dưới đây là cách viết khi bạn muốn thêm màu thương hiệu (brand color) cho dự án.

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#6366f1',
          DEFAULT: '#4f46e5',
          dark: '#4338ca',
        }
      }
    }
  }
}

Sau khi thiết lập, bạn có thể sử dụng các class như text-brand hoặc bg-brand-light.

🎨 この場でTailwindカラーを検索する

最も近い Tailwind クラス

—

—

Hỗ trợ độ trong suốt (Opacity)

Để kích hoạt khả năng chỉ định độ trong suốt như bg-brand/50 với màu tùy chỉnh, bạn có thể cần định nghĩa giá trị màu thông qua biến CSS hoặc sử dụng hàm. Tuy nhiên, kể từ phiên bản Tailwind v3 trở đi, hầu hết các trường hợp viết trực tiếp mã màu HEX vẫn sẽ được xử lý tự động.

Quy tắc đặt tên khuyến nghị

  • Đặt tên theo ngữ nghĩa (Semantic naming) — Thay vì đặt tên là blue-500, hãy đặt là primary hoặc action. Bằng cách này, nếu sau này màu chủ đạo đổi từ xanh sang xanh lá, bạn chỉ cần sửa ở một nơi duy nhất.
  • Tạo dải màu (Scalability) — Thay vì chỉ một màu duy nhất, hãy tạo dải màu từ 50 đến 900 để dễ dàng tạo ra các biến thể giao diện khác nhau.