Công cụ chuyển CSS Variables sang Tailwind Config

Công cụ này làm gì?

Nhiều dự án bắt đầu với design tokens được viết dưới dạng CSS custom properties, ví dụ --primary: #ff0055; hay --brand-500: #6366f1;. Khi áp dụng Tailwind, bạn cần đưa cùng bộ màu đó vào theme để các class như bg-primary và text-brand-500 hoạt động. Gõ lại tay vừa chậm vừa dễ sai. Công cụ này phân tích từng custom property, giữ lại các biến là màu và tự viết cấu trúc Tailwind cho bạn.

Cách nhóm biến

• --brand-50 … --brand-900 sẽ thành object lồng nhau brand: { 50: …, 900: … }, cho bạn các class từ bg-brand-50 đến bg-brand-900.
• Các hậu tố như -light, -dark, -hover và -foreground được gom vào tên gốc. Biến không có hậu tố sẽ thành DEFAULT, nên cả bg-primary lẫn bg-primary-light đều dùng được.
• Tiền tố color- ở đầu sẽ bị bỏ (--color-surface → surface).
• Các token không phải màu, như --radius-md: 8px hoặc font stack, sẽ bị bỏ qua và được liệt kê riêng.

Tailwind v3 và v4 khác nhau thế nào?

Tailwind v3 cấu hình màu bằng JavaScript trong theme.extend.colors. Tailwind v4 chuyển cấu hình sang CSS: mọi biến --color-* nằm trong khối @theme đều sinh ra các utility màu. Bảng màu mặc định của v4 dùng OKLCH, vì vậy đầu ra v4 sẽ chuyển các giá trị cố định sang oklch().

Nên dùng giá trị cố định hay tham chiếu var()?

Khi tham chiếu biến (primary: 'var(--primary)'), bạn có thể định nghĩa lại --primary bên trong .dark hoặc một theme thương hiệu, và mọi class Tailwind sẽ tự cập nhật theo. Lưu ý rằng Tailwind v3 không áp dụng được modifier độ trong suốt như bg-primary/50 cho màu var() thuần. Nếu cần, hãy lưu các kênh màu thay vì giá trị đầy đủ (ví dụ --primary: 255 0 85 kết hợp rgb(var(--primary) / <alpha-value>)). Tailwind v4 xử lý modifier độ trong suốt trên biến bằng color-mix().

Cũng được tìm dưới tên: tailwind config, css custom properties sang tailwind, tailwind colors, chuyển css variables tailwind, @theme, design tokens, tailwind v4, tailwind config colors.

Các công cụ dùng kèm tốt với CSS Variables sang Tailwind

• Tạo bảng màu Tailwind — Dán một màu thương hiệu và nhận thang màu 11 bước (50 đến 950) được cân bằng, tính theo OKLCH, kèm gợi ý độ tương phản và xuất file cho Tailwind v3, v4, CSS và SCSS.
• Chuyển đổi mã màu — Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng dùng.
• Định dạng CSS — Chuyển stylesheet đã nén thành CSS dễ đọc, mỗi thuộc tính một dòng và các khối @media được lồng đúng cấu trúc.
• Tìm tên màu — Dán mã HEX để nhận tên màu dễ đọc gần nhất và tên token gọn gàng cho CSS, SCSS, JavaScript hoặc cấu hình Tailwind của bạn.