Tailwind түсінігі ағындағы генератор
1 түсінің Hex кодынан Tailwind CSS-тің 50–950 аралығындағы 11 сатысы палитрасын және баптау кодын құру
Ерекшеліктер
1 түсінен 11 сатысын автоматты құру
Енгізіген түсін 500-ге орналастырып, 50–950-дің светлоты есептеу
v3 және v4 екі форматына қолдау
config және @theme жазу тәсілін қойындыда ауыстыру
Сатысына Hex көшіру
Түс үлгісінің әрқайсысының түймесімен түс кодын біртіндік көшіру
Енгізу сайын палитра жаңарту
Іске қосу түймесінсіз түсін сынап ұқсастырып қарау
Қолдану тәсілі
Базалық түстің Hex-ін енгізіңіз
Hex кодын енгізіңіз немесе сол жағындағы түс үлгісін шертіп түсті таңдағышпен таңдаңыз
Қажет болса түстің атауын енгізіңіз
Кодта қолданатын түстің атауын ағылшын кіші әріптермен енгізіңіз. Бос болса primary пайдаланылады
11 сатысы түс үлгісін тексеріңіз
50–950-дің түс үлгісі мен Hex кодын тексеріңіз, үлгінің көшіру түймесімен түстерді біртіндік көшіріңіз
Шығыс форматын таңдап көшіріңіз
v3 немесе v4 таңдап «Кодты көшіру» түймесімен tailwind.config.js немесе CSS файлына қойыңыз
Пайдалану жағдайлары
Бренд түсінің светлоты жасау
Түймелердің ховер режимі немесе фонына қолданатын светлоты бренд түсінің біреуінен біріктіріңіз
Стандартты палитрасында жоқ түсті қосу
Tailwind стандартты түстерінде жоқ жобаның өзіндік түсін 11 сатысында баптау файлына қосыңыз
v4-тің @theme баптауын жасау
Сайттың негіздік түсінен Tailwind v4-тің CSS айнымалыларын толығымен құрыңыз
Дизайн макетін іске асыру дайындығы
Макеттің көрсетілген түсінен іске асырудың 11 сатысы кодын дайындап, дизайн құралына да ауыстыруы
Негіздік білім
Tailwind-тың 50–950 нені білдіреді
Tailwind CSS-тің түстері 50-тің ең жаңсақ, 950-тің ең құймас болып, 11 сатысы сандарымен парықтылығын білдіреді, ал 500 сол түстің базасы болады. Сандар «bg-primary-500» немесе «text-primary-700» сияқты класс атауының соңына қосылып пайдаланылады.
- 50–300 сатысы：50–300 сатысы фон түсі немесе жаңсақ сыну үшін пайдаланылатын жарық түстер, ұстасынан қоңыр әрпі салынғанда оқылығы болады.
- 600–950 сатысы：600–950 сатысы түймелердің ховер режимінде немесе тақырып әрпінің түсінде пайдаланылатын қоңыр түстер, ақ фонның ұстасында анық көрінеді.
v3 және v4-тің түс анықтау тәсілінің айырмашылығы
Tailwind CSS-тің v3-інде түстер tailwind.config.js-тің JavaScript-те анықталады, v4-інде CSS файлының @theme ішінде CSS айнымалысы ретінде анықталады. Екі жазу тәсілінде де анықталған түстер «bg-primary-500» сияқты бірдей класс атауымен пайдаланылады.
- v3-тің жазу тәсілі：v3-тің жазу тәсілі theme.extend.colors ішінде «primary: { 500: '#3B82F6' }» сияқты түс атауы мен сатысын ішінесіндіктеп жазу формасы.
- v4-тің жазу тәсілі：v4-тің жазу тәсілі @theme ішінде «--color-primary-500: #3B82F6;» сияқты түс атауы мен сатысын сызықшамен байланыстырған айнымалы атауы ретінде жазу формасы.
Қауіпсіздік және құпиялылық
Тек браузерде
Енгізілген деректер тек сіздің браузеріңізде өңделеді және сыртқа жіберілмейді.
Тек браузерде ғана өңдеу
Палитра есептеулері мен код құру барлығы сіздің браузеріңіз ішінде орындалады және енгізу деректері серверге жіберілмейді.
Хабарлау HTTPS арқылы шифрленеді
Беттің жүктелуі де TLS арқылы шифрленеді және үшінші тұлғалар оның мазмұнын оқи алмайды.
Үшінші тұлғаларға жіберілмейді
Ынамдау желісі немесе трекер сияқты сыртқы қызметтерге енгізу мазмұны жіберілмейді.
Нәтижелер автоматты түрде сақталмайды
Енгізіген түс немесе түс атауы немесе енгізу ұсыныстары серверде сақталмайды.
Google іздеуінде RAKKOTOOLS қадағалаңыз
186 пайдалы құрал Google іздеу және AI іздеуінен оңай табылады!
- Іздеуде табылады
- AI іздеуде де көрсетіледі
- Жаңа құралдарды ашыңыз
Жаңарту ақпараты
- update #318
Tailwind түсін құру құралын қосты, 1 түстен 11 деңгейлі түстер мен баптау кодын жасау