Tạo màu Tailwind

Tạo bảng màu 11 sắc độ từ 50 đến 950 của Tailwind CSS và mã cấu hình từ mã Hex của 1 màu

Thông tin cập nhậtThêm tính năng tạo màu Tailwind, tạo 11 gradation màu sắc và mã cấu hình từ 1 màuXem thông tin cập nhật

Đặc điểm

Tự động tạo 11 sắc độ từ 1 màu

Đặt màu nhập vào 500 và tính toán độ sáng tối từ 50 đến 950

Hỗ trợ cả định dạng v3 và v4

Chuyển đổi giữa cách viết config và @theme bằng tab

Sao chép Hex theo từng sắc độ

Sao chép mã màu từng màu một bằng nút cho từng mẫu màu

Cập nhật bảng màu cùng lúc với đầu vào

Không cần nút thực thi, hãy thử và so sánh các màu

Cách sử dụng

Nhập Hex của màu chuẩn

Nhập mã Hex hoặc nhấp vào mẫu màu ở bên trái để chọn bằng bộ chọn màu

Nhập tên màu nếu cần

Nhập tên màu bằng chữ cái Latinh thường được sử dụng trong mã. Nếu để trống, sẽ sử dụng primary

Xác nhận mẫu màu 11 sắc độ

Xác nhận mẫu màu và mã Hex từ 50 đến 950, sao chép từng màu một bằng nút sao chép của mẫu

Chọn định dạng đầu ra và sao chép

Chọn v3 hoặc v4 và nhấp vào "Sao chép mã" để dán vào tailwind.config.js hoặc tệp CSS

Trường hợp sử dụng

Tạo độ sáng tối của màu thương hiệu

Thống nhất độ sáng tối được sử dụng cho trạng thái di chuột của nút và nền từ 1 màu thương hiệu

Thêm màu không có trong bảng màu tiêu chuẩn

Thêm màu riêng của dự án không có trong màu tiêu chuẩn Tailwind vào tệp cấu hình với 11 sắc độ

Tạo cấu hình @theme của v4

Viết lại các biến CSS của Tailwind v4 từ màu chính của trang web

Chuẩn bị triển khai thiết kế

Chuẩn bị mã 11 sắc độ để triển khai từ màu được chỉ định trong bản thiết kế, cũng chuyển ghi vào công cụ thiết kế

Kiến thức cơ bản

50 đến 950 của Tailwind đại diện cho điều gì

Màu của Tailwind CSS được biểu diễn độ sáng bằng 11 bước từ 50 (nhạt nhất) đến 950 (đậm nhất), với 500 là màu chuẩn. Các số được sử dụng ở cuối tên lớp như "bg-primary-500" hoặc "text-primary-700".

Bước 50 đến 300：Bước 50 đến 300 là các màu sáng thường được sử dụng cho màu nền hoặc tô màu nhạt, dễ đọc khi chữ tối được đặt lên trên.
Bước 600 đến 950：Bước 600 đến 950 là các màu tối thường được sử dụng cho trạng thái di chuột của nút hoặc màu chữ của tiêu đề, rõ ràng trên nền trắng.

Sự khác biệt giữa cách định nghĩa màu của v3 và v4

Trong v3 của Tailwind CSS, các màu được định nghĩa bằng JavaScript trong tailwind.config.js, trong v4 chúng được định nghĩa dưới dạng các biến CSS trong @theme của tệp CSS. Bất kể cách viết nào, các màu được định nghĩa có thể được sử dụng với cùng tên lớp như "bg-primary-500".

Cách viết v3：Cách viết v3 là định dạng lồng nhau tên màu và bước như "primary: { 500: '#3B82F6' }" trong theme.extend.colors.
Cách viết v4：Cách viết v4 là định dạng tên biến được nối bằng dấu gạch ngang như "--color-primary-500: #3B82F6;" trong @theme.