Tailwind CSS түстер анықтамалығы

Tailwind-тің әдепкі палитрасында 22 түс тобы бар (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), әрқайсысында 50-ден (ең ашық) 950-ге дейін (ең қою) 11 реңк бар — жалпы 242 түс. Бұл құрал екі бағытта да жұмыс істейді: ең жақын сәйкес класс атын табу үшін #c4b5fd сияқты hex кодын қойыңыз немесе оның нақты hex, RGB және басқа utility нұсқаларын алу үшін bg-amber-500 сияқты класс теріңіз. Төмендегі толық палитра торын шолуға болады, әр үлгі басу арқылы өз hex кодын көшіреді.

Бұл құрал не істейді?

Tailwind CSS жалпы UI түстері үшін кез келген мәнді таңдауға мүмкіндік берудің орнына тұрақты әдепкі түс шкаласын ұсынады. 22 аталған топтың (amber немесе slate сияқты) әрқайсысында 50-ден 950-ге дейін нөмірленген дәл 11 реңк бар, әр реңктің Tailwind-тің өзі құжаттаған және bg-, text-, border- және ring- utility-лерінде бірдей қолданылатын бір ресми hex мәні бар.

Бұл анықтамалық толық ресми палитраны жергілікті түрде қамтиды, сондықтан түсті немесе класс атын іздеу Tailwind құжаттамасын ашуды, құрастыруды іске қосуды немесе класты тек оның қалай көрінетінін көру үшін PurgeCSS арқылы өткізуді талап етпейді. Hex іздеулері ең жақын ресми реңкті табу үшін RGB-дегі евклидтік қашықтықты қолданады, ал класс іздеулері дәл — мұндағы әрбір мән Tailwind-тің құжатталған әдепкі мәндеріне сәйкес келеді.

Оны неге пайдалану керек?

Дизайн файлынан немесе скриншоттан hex кодын қойыңыз да, ол қай нөмірленген реңкке сәйкес келетінін болжаудың орнына бірден ең жақын Tailwind класс атын алыңыз.
Tailwind құжаттамасын ақтармай-ақ оның нақты hex және RGB мәнін көру үшін slate-900 немесе bg-purple-500 сияқты класс атын теріңіз.
Таңдаудан бұрын реңктерді қатар салыстыру үшін 22 топ x 11 реңктен тұратын толық торды шолыңыз.
Tailwind барлығында бірдей сандық шкаланы қолданатындықтан, кез келген реңктің bg-, text-, border- және ring- нұсқаларын бір басу арқылы алыңыз.
Тегін, лезде және толығымен жергілікті — жүктеусіз, тіркелгісіз, құрастыру қадамынсыз.

Оны қалай пайдалану керек

Hex кодынан класс атын табу үшін: іздеу өрісіне hex мәнін (# белгісімен немесе онсыз) теріңіз немесе қойыңыз — торлың үстінде ең жақын ресми Tailwind реңкі, ол дәл сәйкестік болмаса, түс қашықтығымен бірге көрсетіледі.
Класс атынан hex мәнін табу үшін: класс немесе топ атын теріңіз (мысалы, amber-500, bg-blue-600 немесе жай teal) — дәл сәйкестік hex, RGB және барлық utility нұсқаларын көрсетеді; тек топ атын жазсаңыз, тор сол топқа дейін сүзіледі.
Барлығын шолу үшін: іздеу өрісін бос қалдырып, тордағы кез келген үлгіні басыңыз — оның мәліметтері жоғарыдағы панельде көрсетіледі, ал hex коды автоматты түрде көшіріледі.
Нақты класс атын көшіру үшін мәліметтер панеліндегі bg-/text-/border-/ring- нұсқа түймелерінің кез келгенін басыңыз.

Мысал

Енгізу

#c4b5fd

Нәтиже

violet-300 — Дәл сәйкестік, #C4B5FD, rgb(196, 181, 253)

Бұл hex Tailwind-тің өзінің құжатталған әдепкі мәндерінің бірі болғандықтан, қашықтық 0-ге тең және сәйкестік болжалды емес, дәл болып табылады.

Жиі қойылатын сұрақтар

Бұл Tailwind CSS-тің ресми әдепкі түстері ме?

Иә — барлық 242 hex мәні (22 топ x 11 реңк) Tailwind-тің өзінің құжатталған әдепкі палитрасынан алынған. Tailwind v4 түстерді ішкі жағынан OKLCH ретінде көрсетеді, бірақ сол әдепкі палитра және оның құжатталған hex баламалары v3-тен өзгермеген, сондықтан бұл мәндер екі нұсқа үшін де өзекті.

Hex іздеуі дәл сәйкестік болмаса, бұл нені білдіреді?

Егер сіз Tailwind-тің 242 әдепкі мәнінің біреуі болып табылмайтын hex кодын қойсаңыз (мысалы, теңшелген бренд түсі), құрал RGB қашықтығы бойынша ең жақын ресми реңкті көрсетеді және оны қашықтығымен бірге "Ең жақын сәйкестік" деп белгілейді — ол сіздің енгізуіңізбен пиксель дәлдігінде бірдей болмайды, тек ең жақын Tailwind әдепкі мәні болады.

Неге bg-, text-, border- және ring- бірдей сандарды қолданады?

Tailwind әрбір utility санатында бір ортақ түс шкаласын қолданады, сондықтан bg-amber-500, text-amber-500, border-amber-500 және ring-amber-500 барлығы әртүрлі CSS қасиетіне қолданылған бірдей негізгі hex мәні болып табылады. Сондықтан мәліметтер панелі сіз іздеген кез келген реңк үшін төрт нұсқаны бірге көрсетеді.

Реңк нөмірінсіз тек "blue" сияқты топ тобын іздей аламын ба?

Иә — тек топ атын (нөмірсіз) теру торды сол топтың 11 реңкіне ғана сүзеді, осылайша сіз белгілі бір реңкті таңдамай тұрып, оларды қатар салыстыра аласыз.

Бұл менің конфигурацияда анықтаған теңшелген Tailwind тақырып түстерін қамтиды ма?

Жоқ — бұл анықтамалық тек Tailwind-тің құрылымдық әдепкі палитрасын қамтиды, сіз tailwind.config.js theme.extend.colors блогында немесе v4 @theme блогында қосқан немесе қайта анықтаған түстерді емес. Егер сіздің жобаңыз палитраны теңшесе, сіздің нақты көрсетілетін түстеріңіз осында сол класс аты үшін көрсетілгеннен өзгеше болуы мүмкін.