CodeKitHubŠto je ovaj alat?
Tailwind CSS nudi fiksnu zadanu ljestvicu boja umjesto da vam omogući odabir proizvoljnih vrijednosti za uobičajene boje korisničkog sučelja. Svaka od 22 imenovane obitelji (poput amber ili slate) ima točno 11 nijansi, numeriranih od 50 do 950, a svaka nijansa ima jednu službenu hex vrijednost koju je dokumentirao sam Tailwind i koja se identično koristi u bg-, text-, border- i ring- utility klasama.
Ovaj vodič lokalno ugrađuje cijelu službenu paletu, tako da pretraživanje boje ili naziva klase ne zahtijeva otvaranje Tailwindove dokumentacije, pokretanje builda ili slanje klase kroz PurgeCSS samo da biste vidjeli kako izgleda. Pretraživanja po hexu koriste euklidsku udaljenost u RGB-u za pronalaženje najbliže službene nijanse, dok su pretraživanja po klasi točna — svaka vrijednost ovdje odgovara Tailwindovim dokumentiranim zadanim postavkama.
Zašto ga koristiti?
- Zalijepite hex kod iz dizajnerske datoteke ili snimke zaslona i odmah dobijte najbliži naziv Tailwind klase umjesto nagađanja kojoj numeriranoj nijansi odgovara.
- Upišite naziv klase poput slate-900 ili bg-purple-500 da vidite njezinu točnu hex i RGB vrijednost bez pretraživanja Tailwindove dokumentacije.
- Pregledajte cijelu mrežu od 22 obitelji x 11 nijansi da usporedite nijanse jednu pored druge prije odabira.
- Dobijte bg-, text-, border- i ring- varijante za bilo koju nijansu jednim klikom, jer Tailwind koristi istu brojčanu ljestvicu za sve njih.
- Besplatno, trenutno i potpuno lokalno — bez prijenosa, bez računa, bez koraka builda.
Kako ga koristiti
- Za pronalaženje naziva klase iz hex koda: upišite ili zalijepite hex vrijednost (s ili bez #) u polje za pretraživanje — najbliža službena Tailwind nijansa pojavljuje se iznad mreže, zajedno s udaljenošću boje ako nije točno podudaranje.
- Za pronalaženje hex vrijednosti iz naziva klase: upišite naziv klase ili obitelji (npr. amber-500, bg-blue-600, ili samo teal) — točno podudaranje prikazuje hex, RGB i sve varijante utility klasa; sam naziv obitelji filtrira mrežu na tu obitelj.
- Za pregledavanje svega: ostavite polje za pretraživanje prazno i kliknite bilo koji uzorak boje u mreži — njegovi detalji pojavljuju se u panelu iznad, a njegov hex kod automatski se kopira.
- Kliknite bilo koji od gumba varijanti bg-/text-/border-/ring- u panelu s detaljima da kopirate točan naziv klase.
Primjer
Ulaz
#c4b5fdIzlaz
violet-300 — Točno podudaranje, #C4B5FD, rgb(196, 181, 253)Ovaj hex je jedna od vlastitih dokumentiranih zadanih vrijednosti Tailwinda, pa je udaljenost 0, a podudaranje je točno, a ne približno.
Često postavljana pitanja
Jesu li ovo službene zadane boje Tailwind CSS-a?
Da — svih 242 hex vrijednosti (22 obitelji x 11 nijansi) dolazi iz vlastite dokumentirane zadane palete Tailwinda. Tailwind v4 interno prikazuje boje kao OKLCH, ali ista zadana paleta i njezini dokumentirani hex ekvivalenti nepromijenjeni su u odnosu na v3, pa su ove vrijednosti aktualne za obje verzije.
Što znači kada pretraživanje po hexu nije točno podudaranje?
Ako zalijepite hex kod koji nije jedna od 242 zadane vrijednosti Tailwinda (na primjer, prilagođena boja brenda), alat prikazuje najbližu službenu nijansu prema RGB udaljenosti i označava je kao "Najbliže podudaranje" s prikazanom udaljenošću — neće biti piksel po piksel identičan vašem unosu, samo najbliža Tailwind zadana vrijednost.
Zašto bg-, text-, border- i ring- koriste iste brojeve?
Tailwind primjenjuje jednu zajedničku ljestvicu boja u svim kategorijama utility klasa, pa su bg-amber-500, text-amber-500, border-amber-500 i ring-amber-500 sve ista temeljna hex vrijednost primijenjena na različito CSS svojstvo. Zato panel s detaljima prikazuje sve četiri varijante zajedno za bilo koju nijansu koju pretražujete.
Mogu li pretražiti grupu obitelji poput samo "blue" bez broja nijanse?
Da — upisivanje samog naziva obitelji (bez broja) filtrira mrežu na svih 11 nijansi te obitelji kako biste ih mogli usporediti jednu pored druge, bez odabira određene nijanse.
Pokriva li ovo prilagođene boje Tailwind teme koje sam definirao u svojoj konfiguraciji?
Ne — ovaj vodič pokriva samo ugrađenu zadanu paletu Tailwinda, a ne boje koje ste dodali ili nadjačali u bloku tailwind.config.js theme.extend.colors ili v4 @theme bloku. Ako vaš projekt prilagođava paletu, vaše stvarne prikazane boje mogu se razlikovati od onih prikazanih ovdje za isti naziv klase.