CodeKitHubMi ez az eszköz?
A Tailwind CSS egy rögzített alapértelmezett színskálát biztosít, ahelyett hogy tetszőleges értékeket választhatnál a gyakori felületi színekhez. A 22 elnevezett család mindegyikének (mint az amber vagy a slate) pontosan 11 árnyalata van, 50-től 950-ig számozva, és minden árnyalatnak egy hivatalos hex értéke van, amelyet maga a Tailwind dokumentál, és amelyet azonos módon használnak a bg-, text-, border- és ring- utility-k mindegyikében.
Ez a referencia lokálisan tartalmazza a teljes hivatalos palettát, így egy szín vagy osztálynév kikereséséhez nem kell megnyitni a Tailwind dokumentációját, buildet futtatni, vagy az osztályt a PurgeCSS-en átküldeni csak azért, hogy lásd, hogyan néz ki. A hexa keresés RGB euklideszi távolságot használ a legközelebbi hivatalos árnyalat megtalálásához, az osztálykeresés pedig pontos — minden érték itt megegyezik a Tailwind dokumentált alapértelmezéseivel.
Miért érdemes használni?
- Illessz be egy hexa kódot egy tervfájlból vagy képernyőképből, és azonnal megkapod a legközelebbi Tailwind osztálynevet, ahelyett hogy találgatnád, melyik számozott árnyalatnak felel meg.
- Írj be egy osztálynevet, például slate-900 vagy bg-purple-500, hogy lásd a pontos hex és RGB értéket a Tailwind dokumentációjának átkutatása nélkül.
- Böngészd végig a teljes 22 család x 11 árnyalat rácsot, hogy egymás mellett hasonlítsd össze az árnyalatokat választás előtt.
- Kapd meg a bg-, text-, border- és ring- változatokat bármelyik árnyalathoz egyetlen kattintással, mivel a Tailwind mindegyiknél ugyanazt a számskálát használja.
- Ingyenes, azonnali és teljesen helyi — nincs feltöltés, nincs fiók, nincs build lépés.
Használati útmutató
- Osztálynév keresése hexa kódból: írd be vagy illeszd be a hex értéket (# jellel vagy anélkül) a keresőmezőbe — a legközelebbi hivatalos Tailwind árnyalat megjelenik a rács fölött, a színtávolsággal együtt, ha nem pontos egyezés.
- Hexa érték keresése osztálynévből: írd be az osztály vagy család nevét (pl. amber-500, bg-blue-600, vagy csak teal) — a pontos egyezés megmutatja a hexet, az RGB-t és az összes utility-változatot; egy önmagában álló családnév a rácsot arra a családra szűri.
- Böngészéshez mindenhez: hagyd üresen a keresőmezőt, és kattints bármelyik színmintára a rácsban — a részletei megjelennek a fenti panelen, a hexa kódja pedig automatikusan bemásolódik.
- Kattints bármelyik bg-/text-/border-/ring- változat gombra a részletpanelen az adott pontos osztálynév másolásához.
Példa
Bemenet
#c4b5fdKimenet
violet-300 — Pontos egyezés, #C4B5FD, rgb(196, 181, 253)Ez a hex a Tailwind saját, dokumentált alapértelmezett értékeinek egyike, így a távolság 0, és az egyezés pontos, nem közelítő.
Gyakori kérdések
Ezek a hivatalos Tailwind CSS alapértelmezett színek?
Igen — mind a 242 hex érték (22 család x 11 árnyalat) a Tailwind saját dokumentált alapértelmezett palettájából származik. A Tailwind v4 belsőleg OKLCH formátumban reprezentálja a színeket, de ugyanaz az alapértelmezett paletta és annak dokumentált hex megfelelői változatlanok a v3 óta, így ezek az értékek mindkét verzióra érvényesek.
Mit jelent, ha egy hexa keresés nem pontos egyezés?
Ha egy olyan hexa kódot illesztesz be, amely nem a Tailwind 242 alapértelmezett értékének egyike (például egy egyedi márkaszín), az eszköz megmutatja a legközelebbi hivatalos árnyalatot RGB távolság alapján, és „Legközelebbi egyezés” címkével látja el a távolság feltüntetésével — nem lesz pixelre pontosan azonos a bemeneteddel, csak a legközelebbi Tailwind alapértelmezés.
Miért használ a bg-, text-, border- és ring- ugyanolyan számokat?
A Tailwind egyetlen közös színskálát alkalmaz minden utility-kategóriában, így a bg-amber-500, text-amber-500, border-amber-500 és ring-amber-500 mind ugyanaz az alapul szolgáló hex érték, csak más CSS tulajdonságra alkalmazva. Ezért mutatja a részletpanel mind a négy változatot együtt bármelyik keresett árnyalathoz.
Kikereshetek egy családcsoportot, mint például csak a "blue"-t, árnyalatszám nélkül?
Igen — ha csak a családnevet írod be (szám nélkül), a rács leszűkül az adott család 11 árnyalatára, hogy egymás mellett hasonlíthasd össze őket, mielőtt konkrét árnyalatot választanál.
Ez lefedi a konfigurációmban definiált egyedi Tailwind témaszíneket?
Nem — ez a referencia csak a Tailwind beépített alapértelmezett palettáját fedi le, nem azokat a színeket, amelyeket a tailwind.config.js theme.extend.colors blokkjában vagy a v4 @theme blokkjában adtál hozzá vagy írtál felül. Ha a projekted testre szabja a palettát, a ténylegesen megjelenített színek eltérhetnek az itt látottaktól ugyanahhoz az osztálynévhez.