Bảng màu tôi thực sự sử dụng thay vì mặc định của Tailwind

Tôi thích hệ thống màu của Tailwind như một công cụ thiết kế: việc có sẵn 50 sắc thái xanh lam được đặt tên và sẵn sàng sử dụng thực sự hữu ích. Nhưng có một nhược điểm: mọi trang web dùng Tailwind đều sử dụng cùng 50 sắc thái xanh lam đó. Khi tôi chuyển các dự án cá nhân của mình sang vanilla CSS, tôi không chỉ mất đi các utility class; tôi còn mất đi cái nạng là một bảng màu được xây dựng sẵn.

Dưới đây là những lựa chọn thay thế mà tôi đã chọn, kèm theo mã thực tế.

Uchu: Lựa chọn tôi luôn quay lại

Uchu là một bảng màu được tuyển chọn cẩn thận gồm các màu ấm, dịu, hoạt động tốt cho các trang web nhiều nội dung. Nó có sẵn dưới dạng tệp CSS mà bạn có thể thêm vào bất kỳ dự án nào.

:root {
  --uchu-blue: #3b82f6;
  --uchu-indigo: #6366f1;
  --uchu-amber: #f59e0b;
  --uchu-rose: #f43f5e;
  --uchu-slate: #64748b;
}

Điều tôi thích ở nó: các màu sắc có đủ cá tính để không trông chung chung, nhưng chúng đủ dịu để không xung đột với nội dung. Đó là một sự cân bằng tốt.

Flexoki: Dành cho các dự án tối giản

Flexoki là một bảng màu mực, độ tương phản thấp được thiết kế để đọc văn bản dài. Nó sử dụng màu đen ấm và màu trắng ngà thay vì #000 và #fff thuần khiết, giúp giảm mỏi mắt.

:root {
  --flexoki-black: #100f0f;
  --flexoki-paper: #fffcf0;
  --flexoki-muted: #6f6e69;
  --flexoki-accent: #205ea6;
}

Tôi sử dụng cái này cho blog cá nhân của mình. Nền màu trắng ngà (#fffcf0) dễ đọc hơn đáng kể so với màu trắng tinh, đặc biệt là ở chế độ tối.

Reasonable Colors: Ưu tiên khả năng tiếp cận

Reasonable Colors được xây dựng từ đầu để tuân thủ WCAG. Mọi màu trong bảng màu đều đáp ứng tỷ lệ tương phản AA trở lên khi được sử dụng làm văn bản trên nền được khuyến nghị.

:root {
  --rc-primary: #0057b3;
  --rc-primary-bg: #e8f1fa;
  --rc-success: #1e7a1e;
  --rc-warning: #9e5d00;
  --rc-error: #c41e1e;
}

Đây là thứ tôi sử dụng cho các dự án của khách hàng khi các yêu cầu về khả năng tiếp cận là rõ ràng. Tài liệu bao gồm tỷ lệ tương phản cho mọi sự kết hợp.

Cách tiếp cận một dòng

Nếu bạn không muốn cam kết với một bảng màu đầy đủ, bạn có thể đạt được những kết quả đáng ngạc nhiên chỉ với các thuộc tính tùy chỉnh CSS dựa trên một màu chính duy nhất:

:root {
  --primary: #2563eb;
  --primary-light: oklch(from var(--primary) 0.7 0.15 h);
  --primary-dark: oklch(from var(--primary) 0.3 0.2 h);
  --surface: #fafafa;
  --text: #171717;
}

Cú pháp oklch(from ...) hiện được hỗ trợ trong tất cả các trình duyệt hiện đại (2026) và cho phép bạn tạo ra toàn bộ bảng màu từ một giá trị màu mà không cần chọn thủ công.

Bạn cũng có thể thích

• Tailwind CSS v4: Có gì mới và cách di chuyển
• CSS Container Queries (@container): CSS nhận biết thành phần vào năm 2026
• CSS Container Queries: Hướng dẫn đầy đủ về bố cục dựa trên thành phần
• Hoạt ảnh CSS hiện đại: Chuyển đổi GPU hiệu suất cao

Tìm hiểu sâu: Cơ chế cốt lõi

Khi chúng ta nhìn sâu hơn, các cơ chế cơ bản cho thấy sự tương tác phức tạp của các hệ thống. Trong phát triển hiện đại, việc hiểu các cơ chế này là điều phân biệt một người mới với một chuyên gia.

Hãy xem xét ví dụ thực tế này:

// A comprehensive example demonstrating advanced patterns
class ServiceManager {
  constructor() {
    this.services = new Map();
    this.initialized = false;
  }

  register(name, service) {
    if (this.services.has(name)) {
      throw new Error(`Service ${name} already registered`);
    }
    this.services.set(name, service);
  }

  async initializeAll() {
    this.initialized = true;
    for (const [name, service] of this.services) {
      if (typeof service.init === 'function') {
        await service.init();
      }
    }
  }

  get(name) {
    if (!this.initialized) {
      console.warn('Accessing services before initialization');
    }
    return this.services.get(name);
  }
}

Mô hình này đảm bảo rằng kiến trúc của chúng ta vẫn có thể mở rộng và mạnh mẽ ngay cả khi các yêu cầu kinh doanh thay đổi. Đây là một cách tiếp cận cơ bản mang lại lợi ích trong các ứng dụng quy mô lớn.

Ứng dụng thực tế và mở rộng quy mô

Việc triển khai điều này trong môi trường sản xuất đặt ra một loạt thách thức mới. Chúng ta phải tính đến tính đồng thời, quản lý trạng thái và rò rỉ bộ nhớ.

Ví dụ, khi xử lý các hệ thống thông lượng cao, mọi tối ưu hóa nhỏ đều có giá trị. Chúng ta thường dựa vào các công cụ phân tích hiệu suất để xác định các nút thắt cổ chai không rõ ràng trong quá trình phát triển cục bộ.

Sơ đồ trên minh họa một chiến lược triển khai điển hình trong đó ứng dụng của chúng ta mở rộng theo chiều ngang.

Kiểm tra sự hiểu biết của bạn

Các câu hỏi thường gặp