Генератор на Tailwind бои
Генерирајте палета од 11 нијанси (50–950) на Tailwind CSS и код за конфигурација од еден Hex код
Карактеристики
Автоматски 11 нијанси од една боја
Внесената боја се поставува како 500 и се пресметуваат нијансите 50–950
Поддршка за форматите на v3 и v4
Префрлување меѓу записите config и @theme преку јазичиња
Копирање на Hex по нијанса
Копирајте го кодот на бојата една по една преку копчето кај секој примерок
Палетата се ажурира при внесување
Без копче за извршување — пробувајте и споредувајте бои веднаш
Како се користи
Внесете Hex на основната боја
Внесете Hex код или кликнете на примерокот на бојата лево за избор преку бирачот на бои
По потреба внесете име на бојата
Внесете го името на бојата што се користи во кодот со мали латинични букви. Ако е празно, се користи primary
Проверете ги примероците на 11-те нијанси
Проверете ги примероците и Hex кодовите од 50 до 950 и копирајте ги поединечно преку копчето за копирање кај примерокот
Изберете формат на излез и копирајте
Изберете v3 или v4 и со „Копирај код“ залепете во tailwind.config.js или во CSS датотеката
Случаи на употреба
Создавање нијанси на бојата на брендот
Усогласете ги нијансите за hover на копчиња и позадини од една боја на брендот
Додавање боја што ја нема во стандардната палета
Додајте во конфигурациската датотека сопствена боја на проектот со 11 нијанси, која ја нема меѓу стандардните бои на Tailwind
Креирање на @theme поставките за v4
Испишете ги наеднаш CSS променливите за Tailwind v4 од главната боја на сајтот
Подготовка за имплементација на дизајн-макет
Подгответе код со 11 нијанси за имплементација од бојата зададена во макетот и пренесете го и во дизајн-алатката
Основни знаења
Што означуваат 50–950 во Tailwind
Боите во Tailwind CSS ја изразуваат светлината преку 11 нивоа, каде 50 е најсветло, а 950 најтемно, при што 500 е основата на таа боја. Броевите се додаваат на крајот од името на класата, како „bg-primary-500“ или „text-primary-700“.
- Нивоата 50–300：Нивоата 50–300 се светли бои што најчесто се користат за позадини и бледи пополнувања, и остануваат читливи кога врз нив се става темен текст.
- Нивоата 600–950：Нивоата 600–950 се темни бои што најчесто се користат за hover состојба на копчиња и за боја на текстот на насловите, и јасно се гледаат врз бела позадина.
Разлика во дефинирањето бои кај v3 и v4
Кај Tailwind CSS v3 боите се дефинираат со JavaScript во tailwind.config.js, а кај v4 се дефинираат како CSS променливи во @theme во CSS датотеката. Во двата записи, дефинираната боја се користи со исто име на класа, како „bg-primary-500“.
- Записот на v3：Записот на v3 е формат во кој во theme.extend.colors се пишуваат вгнездено името на бојата и нивото, како „primary: { 500: '#3B82F6' }“.
- Записот на v4：Записот на v4 е формат во кој во @theme се пишува име на променлива каде името на бојата и нивото се поврзани со цртичка, како „--color-primary-500: #3B82F6;“.
Безбедност и приватност
Целосно во прелистувачот
Внесените податоци се обработуваат само во вашиот прелистувач и не се испраќаат надвор.
Обработка само во браузер
Пресметката на палетата и генерирањето код се врши целосно во вашиот браузер, а влезните податоци не се испраќаат на сервер.
Комуникацијата е шифрирана со HTTPS
Вчитување на страната исто така е шифрирано со TLS и содржината не може да се прочита од трети страни.
Без испраќање на трети страни
Содржината на влезот не се испраќа на надворешни услуги како реклами или праќачи.
Без автоматско зачувување на резултати
Внесената боја и име на бојата и влезни предлози не се зачувуваат на сервер.
Следете го RAKKOTOOLS на Google Пребарување
187 корисни алатки стануваат полесни за пронаоѓање преку Google Пребарување и AI пребарување!
- Се наоѓа во пребарувањето
- Се прикажува и во AI пребарување
- Откривање и на нови алатки
Информации за ажурирање
- update #318
Додадено генерирање на Tailwind бои — од една боја се создаваат 11 нијанси и код за конфигурација