CodeKitHubKas ir šis rīks?
Tailwind CSS piedāvā fiksētu noklusējuma krāsu skalu, nevis ļauj izvēlēties patvaļīgas vērtības biežāk lietotajām UI krāsām. Katrai no 22 nosauktajām saimēm (piemēram, amber vai slate) ir tieši 11 toņi, numurēti no 50 līdz 950, un katram tonim ir viena oficiāla hex vērtība, ko dokumentējis pats Tailwind un kas identiski tiek izmantota bg-, text-, border- un ring- utility klasēs.
Šī uzziņa lokāli iekļauj visu oficiālo paleti, tāpēc krāsas vai klases nosaukuma meklēšanai nav jāatver Tailwind dokumentācija, jāveic izveide (build) vai jāsūta klase caur PurgeCSS tikai lai redzētu, kā tā izskatās. Hex meklēšana izmanto Eiklīda attālumu RGB, lai atrastu tuvāko oficiālo toni, savukārt klašu meklēšana ir precīza — katra šeit esošā vērtība atbilst Tailwind dokumentētajām noklusējuma vērtībām.
Kāpēc to izmantot?
- Ielīmējiet hex kodu no dizaina faila vai ekrānuzņēmuma un uzreiz saņemiet tuvāko Tailwind klases nosaukumu, nevis minot, kuram numurētajam tonim tas atbilst.
- Ievadiet klases nosaukumu, piemēram, slate-900 vai bg-purple-500, lai redzētu tā precīzo hex un RGB vērtību, neroktos pa Tailwind dokumentāciju.
- Pārlūkojiet visu 22 saimju x 11 toņu režģi, lai salīdzinātu toņus blakus pirms izvēles.
- Iegūstiet jebkura toņa bg-, text-, border- un ring- variantus ar vienu klikšķi, jo Tailwind visiem tiem izmanto vienu un to pašu skaitlisko skalu.
- Bezmaksas, tūlītēji un pilnībā lokāli — bez augšupielādes, bez konta, bez izveides (build) soļa.
Kā to lietot
- Lai atrastu klases nosaukumu no hex koda: ievadiet vai ielīmējiet hex vērtību (ar # vai bez tā) meklēšanas laukā — tuvākais oficiālais Tailwind tonis parādās virs režģa kopā ar krāsas attālumu, ja tā nav precīza atbilstība.
- Lai atrastu hex vērtību no klases nosaukuma: ievadiet klases vai saimes nosaukumu (piem., amber-500, bg-blue-600 vai vienkārši teal) — precīza atbilstība parāda hex, RGB un visus utility variantus; tikai saimes nosaukums filtrē režģi līdz šai saimei.
- Lai pārlūkotu visu: atstājiet meklēšanas lauku tukšu un noklikšķiniet uz jebkura parauga režģī — tā detaļas parādās augšējā panelī, un tā hex kods tiek automātiski nokopēts.
- Noklikšķiniet uz jebkuras no bg-/text-/border-/ring- varianta pogām detaļu panelī, lai nokopētu precīzo klases nosaukumu.
Piemērs
Ievade
#c4b5fdIzvade
violet-300 — Precīza atbilstība, #C4B5FD, rgb(196, 181, 253)Šis hex kods ir viena no Tailwind pašas dokumentētajām noklusējuma vērtībām, tāpēc attālums ir 0, un atbilstība ir precīza, nevis tuvināta.
Biežāk uzdotie jautājumi
Vai tās ir oficiālās Tailwind CSS noklusējuma krāsas?
Jā — visas 242 hex vērtības (22 saimes x 11 toņi) nāk no Tailwind pašas dokumentētās noklusējuma paletes. Tailwind v4 iekšēji attēlo krāsas kā OKLCH, taču tā pati noklusējuma palete un tās dokumentētie hex ekvivalenti nav mainījušies kopš v3, tāpēc šīs vērtības ir aktuālas abām versijām.
Ko nozīmē, ja hex meklēšana nav precīza atbilstība?
Ja ielīmējat hex kodu, kas nav viena no 242 Tailwind noklusējuma vērtībām (piemēram, pielāgota zīmola krāsa), rīks parāda tuvāko oficiālo toni pēc RGB attāluma un apzīmē to kā "Tuvākā atbilstība" ar parādīto attālumu — tas nebūs pikseļa precizitātē identisks jūsu ievadītajam, tikai tuvākā Tailwind noklusējuma vērtība.
Kāpēc bg-, text-, border- un ring- visi izmanto vienus un tos pašus skaitļus?
Tailwind piemēro vienu kopīgu krāsu skalu visām utility kategorijām, tāpēc bg-amber-500, text-amber-500, border-amber-500 un ring-amber-500 visi ir viena un tā pati pamatā esošā hex vērtība, kas piemērota citai CSS īpašībai. Tāpēc detaļu panelis parāda visus četrus variantus kopā jebkuram tonim, ko meklējat.
Vai varu meklēt saimes grupu, piemēram, tikai "blue", bez toņa numura?
Jā — ievadot tikai saimes nosaukumu (bez numura), režģis tiek filtrēts līdz tikai šīs saimes 11 toņiem, lai jūs varētu tos salīdzināt blakus, vēl neizvēloties konkrētu toni.
Vai tas aptver pielāgotas Tailwind tēmas krāsas, ko esmu definējis savā konfigurācijā?
Nē — šī uzziņa aptver tikai Tailwind iebūvēto noklusējuma paleti, nevis krāsas, ko esat pievienojis vai pārrakstījis tailwind.config.js theme.extend.colors blokā vai v4 @theme blokā. Ja jūsu projekts pielāgo paleti, jūsu faktiski attēlotās krāsas var atšķirties no šeit redzamajām tam pašam klases nosaukumam.