ColorKraken (Beta)
ColorKraken là sự kết hợp với Tailwind để tạo ra các tông màu tùy chỉnh từ một mã hex mà bạn cung cấp, từ người thiết kế đến các nhà phát triển.
Cài Đặt
Sử dụng trình quản lý gói npm để cài đặt ColorKraken.
npm install colorkraken --save-dev
Sử Dụng
Sau khi cài đặt gói của bạn, tạo tệp colorkraken-config.js trong thư mục gốc và thêm bất kỳ tên lớp và màu sắc nào bạn muốn.
module.exports = {
arguments: [
{ name: "primary", value: "#604181" },
{ name: "secondary", value: "#F89630" },
],
}
Trong tệp tailwind.config.js của bạn, thêm
const Colorkraken = require ('colorkraken');
Và gán các biến Tailwind cho biến Color Kraken
module.exports = {
purge: [],
theme: {
extend: {
colors: Colorkraken,
textColors: Colorkraken,
backgroundColors: Colorkraken,
},
...
}
Sau đó chạy
npm run build:css
Danh sách các lớp phụ có sẵn
Color Kraken trả về một đối tượng chứa tất cả các tên lớp và màu sắc của bạn đã chuyển đổi thành rgba
{
primary: {
'100': 'rgba(160, 141, 179, 1)',
'200': 'rgba(144, 122, 167, 1)',
'300': 'rgba(128, 103, 154, 1)',
'400': 'rgba(112, 84, 142, 1)',
'500': 'rgba(96, 65, 129, 1)',
'600': 'rgba(86, 59, 116, 1)',
'700': 'rgba(77, 52, 103, 1)',
'800': 'rgba(67, 46, 90, 1)',
'900': 'rgba(58, 39, 77, 1)'
}
},
{
secondary: {
'100': 'rgba(251, 192, 131, 1)',
'200': 'rgba(250, 182, 110, 1)',
'300': 'rgba(249, 171, 89, 1)',
'400': 'rgba(249, 161, 69, 1)',
'500': 'rgba(248, 150, 48, 1)',
'600': 'rgba(223, 135, 43, 1)',
'700': 'rgba(198, 120, 38, 1)',
'800': 'rgba(174, 105, 34, 1)',
'900': 'rgba(149, 90, 29, 1)'
}
}
Để truy cập màu tùy chỉnh mới của bạn bằng cách sử dụng Tailwind text-primary-500 active:text-primary-700 hover:text-primary-300⚠️Mặc định, biến thể active không được kích hoạt cho bất kỳ plugin core nào⚠️
Chi tiết tải về:
Tác giả: Bouhoum
Nguồn: https://github.com/Bouhoum/colorkraken
Giấy phép: MIT license
