CodeKitHubKaj je to orodje?
Tailwind CSS ponuja fiksno privzeto barvno lestvico, namesto da bi vam omogočil izbiro poljubnih vrednosti za pogoste barve uporabniškega vmesnika. Vsaka od 22 poimenovanih družin (kot sta amber ali slate) ima natanko 11 odtenkov, oštevilčenih od 50 do 950, vsak odtenek pa ima eno uradno hex vrednost, ki jo dokumentira Tailwind sam in se enako uporablja v vseh utility razredih bg-, text-, border- in ring-.
Ta vodnik lokalno vključuje celotno uradno paleto, tako da iskanje barve ali imena razreda ne zahteva odpiranja Tailwindove dokumentacije, izvajanja gradnje (build) ali pošiljanja razreda skozi PurgeCSS samo zato, da vidite, kako izgleda. Iskanja po hex uporabljajo evklidsko razdaljo v RGB, da najdejo najbližji uradni odtenek, iskanja po razredu pa so natančna — vsaka vrednost tukaj se ujema z dokumentiranimi privzetimi vrednostmi Tailwind.
Zakaj ga uporabiti?
- Prilepite hex kodo iz oblikovalske datoteke ali posnetka zaslona in takoj dobite najbližje ime razreda Tailwind, namesto da ugibate, kateremu oštevilčenemu odtenku ustreza.
- Vnesite ime razreda, kot je slate-900 ali bg-purple-500, da vidite njegovo natančno hex in RGB vrednost, ne da bi brskali po Tailwindovi dokumentaciji.
- Prebrskajte celotno mrežo 22 družin x 11 odtenkov, da primerjate odtenke drug ob drugem, preden izberete enega.
- Z enim klikom pridobite različice bg-, text-, border- in ring- za kateri koli odtenek, saj Tailwind uporablja isto številčno lestvico za vse.
- Brezplačno, takojšnje in popolnoma lokalno — brez nalaganja, brez računa, brez koraka gradnje.
Kako ga uporabljati
- Za iskanje imena razreda iz hex kode: vnesite ali prilepite hex vrednost (s # ali brez njega) v iskalno polje — najbližji uradni odtenek Tailwind se prikaže nad mrežo, skupaj z barvno razdaljo, če ne gre za natančno ujemanje.
- Za iskanje hex vrednosti iz imena razreda: vnesite ime razreda ali družine (npr. amber-500, bg-blue-600 ali samo teal) — natančno ujemanje prikaže hex, RGB in vse različice utility; samo ime družine filtrira mrežo na to družino.
- Za brskanje po vsem: pustite iskalno polje prazno in kliknite kateri koli vzorec v mreži — njegovi podrobnosti se prikažejo v zgornjem podoknu, njegova hex koda pa se samodejno kopira.
- Kliknite katerega koli od gumbov za različice bg-/text-/border-/ring- v podoknu s podrobnostmi, da kopirate natančno ime razreda.
Primer
Vnos
#c4b5fdRezultat
violet-300 — Natančno ujemanje, #C4B5FD, rgb(196, 181, 253)Ta hex je ena od Tailwindovih lastnih dokumentiranih privzetih vrednosti, zato je razdalja 0, ujemanje pa je natančno in ne približno.
Pogosta vprašanja
Ali so to uradne privzete barve Tailwind CSS?
Da — vseh 242 hex vrednosti (22 družin x 11 odtenkov) izhaja iz Tailwindove lastne dokumentirane privzete palete. Tailwind v4 barve interno predstavlja kot OKLCH, vendar sta ista privzeta paleta in njeni dokumentirani hex ekvivalenti nespremenjeni od v3, zato so te vrednosti aktualne za obe različici.
Kaj pomeni, ko iskanje po hex ni natančno ujemanje?
Če prilepite hex kodo, ki ni ena od 242 privzetih vrednosti Tailwind (na primer prilagojena barva blagovne znamke), orodje prikaže najbližji uradni odtenek glede na razdaljo RGB in ga označi kot "Najbližje ujemanje" s prikazano razdaljo — ne bo slikovno-pikselsko identično vašemu vnosu, temveč le najbližja privzeta vrednost Tailwind.
Zakaj bg-, text-, border- in ring- vsi uporabljajo enake številke?
Tailwind uporablja eno skupno barvno lestvico v vseh kategorijah utility, zato so bg-amber-500, text-amber-500, border-amber-500 in ring-amber-500 vse ista osnovna hex vrednost, uporabljena za drugo lastnost CSS. Zato podokno s podrobnostmi prikaže vse štiri različice skupaj za kateri koli odtenek, ki ga iščete.
Ali lahko iščem skupino družine, kot je samo "blue", brez številke odtenka?
Da — vnos samo imena družine (brez številke) filtrira mrežo na le 11 odtenkov te družine, da jih lahko primerjate drug ob drugem, ne da bi še izbrali določen odtenek.
Ali to zajema prilagojene barve teme Tailwind, ki sem jih definiral v svoji konfiguraciji?
Ne — ta vodnik zajema samo vgrajeno privzeto paleto Tailwind, ne barv, ki ste jih dodali ali preglasili v bloku tailwind.config.js theme.extend.colors ali bloku @theme različice v4. Če vaš projekt prilagaja paleto, se lahko vaše dejansko upodobljene barve razlikujejo od tistih, prikazanih tukaj za isto ime razreda.