CodeKitHubMis see tööriist on?
Tailwind CSS pakub fikseeritud vaikimisi värviskaalat, selle asemel et lasta sul valida suvalisi väärtusi tavaliste UI-värvide jaoks. Igal 22-st nimega perest (nagu amber või slate) on täpselt 11 tooni, numbritega 50 kuni 950, ja igal toonil on üks ametlik hex-väärtus, mille Tailwind ise on dokumenteerinud ja mida kasutatakse identselt bg-, text-, border- ja ring-utility'te vahel.
See juhend sisaldab kogu ametlikku paletti lokaalselt, nii et värvi või klassinime otsimine ei nõua Tailwindi dokumentatsiooni avamist, buildi käivitamist ega klassi PurgeCSS-i kaudu saatmist ainult selleks, et näha, kuidas see välja näeb. Hex-otsingud kasutavad lähima ametliku tooni leidmiseks RGB eukleidilist kaugust ja klassiotsingud on täpsed — iga siinne väärtus vastab Tailwindi dokumenteeritud vaikeväärtustele.
Miks seda kasutada?
- Kleebi hex-kood disainifailist või ekraanipildist ja saad koheselt lähima Tailwindi klassinime, selle asemel et arvata, millisele numbriga toonile see vastab.
- Sisesta klassinimi, näiteks slate-900 või bg-purple-500, et näha selle täpset hex- ja RGB-väärtust ilma Tailwindi dokumentatsioonist otsimata.
- Sirvi kogu 22 pere x 11 tooni võrgustikku, et võrrelda toone kõrvuti enne valimist.
- Saa iga tooni bg-, text-, border- ja ring-variandid ühe klõpsuga, kuna Tailwind kasutab kõigi puhul sama numbrilist skaalat.
- Tasuta, koheselt ja täielikult lokaalselt — ilma üleslaadimiseta, ilma kontota, ilma buildi-sammuta.
Kuidas kasutada
- Klassinime leidmiseks hex-koodist: sisesta või kleebi hex-väärtus (kas #-ga või ilma) otsingukasti — lähim ametlik Tailwindi toon ilmub võrgustiku kohale koos värvikaugusega, kui see pole täpne vaste.
- Hex-väärtuse leidmiseks klassinimest: sisesta klassi- või perenimi (nt amber-500, bg-blue-600 või lihtsalt teal) — täpne vaste kuvab hex-i, RGB-i ja kõik utility-variandid; ainult perenimi filtreerib võrgustiku selle pere järgi.
- Kõige sirvimiseks: jäta otsingukast tühjaks ja klõpsa mis tahes näidisel võrgustikus — selle üksikasjad ilmuvad ülemises paneelis ja selle hex-kood kopeeritakse automaatselt.
- Klõpsa mis tahes bg-/text-/border-/ring-variandi nupul üksikasjade paneelis, et kopeerida täpne klassinimi.
Näide
Sisend
#c4b5fdTulemus
violet-300 — Täpne vaste, #C4B5FD, rgb(196, 181, 253)See hex on üks Tailwindi enda dokumenteeritud vaikeväärtustest, seega on kaugus 0 ja vaste on täpne, mitte ligikaudne.
Korduma kippuvad küsimused
Kas need on ametlikud Tailwind CSS-i vaikevärvid?
Jah — kõik 242 hex-väärtust (22 peret x 11 tooni) pärinevad Tailwindi enda dokumenteeritud vaikepaletist. Tailwind v4 esitab värve sisemiselt OKLCH-na, kuid sama vaikepalett ja selle dokumenteeritud hex-vasted on v3-ga võrreldes muutumatud, seega on need väärtused kehtivad mõlema versiooni puhul.
Mida tähendab see, kui hex-otsing ei anna täpset vastet?
Kui kleebid hex-koodi, mis pole üks Tailwindi 242 vaikeväärtusest (näiteks kohandatud brändivärv), näitab tööriist lähimat ametlikku tooni RGB-kauguse järgi ja märgib selle kui "Lähim vaste" koos näidatud kaugusega — see ei ole pikslitäpselt identne sinu sisendiga, vaid lihtsalt lähim Tailwindi vaikeväärtus.
Miks kasutavad bg-, text-, border- ja ring- kõik samu numbreid?
Tailwind rakendab ühte jagatud värviskaalat kõigi utility-kategooriate vahel, seega on bg-amber-500, text-amber-500, border-amber-500 ja ring-amber-500 kõik sama aluseks olev hex-väärtus, mida rakendatakse erinevale CSS-omadusele. Seetõttu näitab üksikasjade paneel kõiki nelja varianti koos iga tooni jaoks, mida otsid.
Kas saan otsida perekonda, näiteks lihtsalt "blue", ilma toonarvuta?
Jah — ainult perenime sisestamine (ilma numbrita) filtreerib võrgustiku selle pere 11 toonini, et saaksid neid kõrvuti võrrelda, ilma et peaksid veel konkreetset tooni valima.
Kas see katab minu konfiguratsioonis määratud kohandatud Tailwindi teemavärve?
Ei — see juhend katab ainult Tailwindi sisseehitatud vaikepaletti, mitte värve, mille oled lisanud või üle kirjutanud tailwind.config.js theme.extend.colors plokis või v4 @theme plokis. Kui su projekt kohandab paletti, võivad su tegelikud renderdatud värvid erineda siin kuvatust sama klassinime puhul.