CodeKitHubBu Araç Nedir?
Tailwind CSS, yaygın arayüz renkleri için keyfi değerler seçmenize izin vermek yerine sabit bir varsayılan renk skalası sunar. 22 isimli aileden her biri (amber veya slate gibi) tam olarak 11 tona sahiptir, 50'den 950'ye numaralandırılmıştır ve her tonun, Tailwind'in kendisi tarafından belgelenen ve bg-, text-, border- ve ring- yardımcı sınıflarında aynı şekilde kullanılan bir resmi hex değeri vardır.
Bu referans, tam resmi paleti yerel olarak gömer; böylece bir renk veya sınıf adı aramak, Tailwind'in belgelerini açmayı, bir build çalıştırmayı veya sadece nasıl göründüğünü görmek için sınıfı PurgeCSS üzerinden geçirmeyi gerektirmez. Hex aramaları en yakın resmi tonu bulmak için RGB Öklid mesafesini kullanır ve sınıf aramaları tam eşleşmelidir — buradaki her değer Tailwind'in belgelenen varsayılanlarıyla eşleşir.
Neden Kullanmalısınız?
- Bir tasarım dosyasından veya ekran görüntüsünden bir hex kodu yapıştırın ve hangi numaralı tona karşılık geldiğini tahmin etmek yerine en yakın Tailwind sınıf adını anında öğrenin.
- Tailwind'in belgelerinde araştırma yapmadan tam hex ve RGB değerini görmek için slate-900 veya bg-purple-500 gibi bir sınıf adı yazın.
- Seçim yapmadan önce tonları yan yana karşılaştırmak için tam 22 aile x 11 ton ızgarasına göz atın.
- Tailwind tümünde aynı sayısal skalayı kullandığından, herhangi bir ton için bg-, text-, border- ve ring- varyantlarını tek tıkla alın.
- Ücretsiz, anında ve tamamen yerel — yükleme yok, hesap yok, build adımı yok.
Nasıl Kullanılır
- Bir hex koddan sınıf adı bulmak için: hex değerini (# ile veya # olmadan) arama kutusuna yazın veya yapıştırın — en yakın resmi Tailwind tonu, tam eşleşme değilse renk mesafesiyle birlikte ızgaranın üzerinde görünür.
- Bir sınıf adından hex değeri bulmak için: sınıf veya aile adını yazın (örn. amber-500, bg-blue-600 veya sadece teal) — tam eşleşme hex, RGB ve tüm yardımcı sınıf varyantlarını gösterir; tek başına bir aile adı ızgarayı o aileye filtreler.
- Her şeye göz atmak için: arama kutusunu boş bırakın ve ızgaradaki herhangi bir renk örneğine tıklayın — ayrıntıları yukarıdaki panelde görünür ve hex kodu otomatik olarak kopyalanır.
- Tam olarak o sınıf adını kopyalamak için ayrıntı panelindeki bg-/text-/border-/ring- varyant düğmelerinden herhangi birine tıklayın.
Örnek
Giriş
#c4b5fdÇıkış
violet-300 — Tam eşleşme, #C4B5FD, rgb(196, 181, 253)Bu hex, Tailwind'in kendi belgelenen varsayılan değerlerinden biridir, bu yüzden mesafe 0'dır ve eşleşme yaklaşık değil tamdır.
Sıkça Sorulan Sorular
Bunlar resmi Tailwind CSS varsayılan renkleri mi?
Evet — 242 hex değerinin tümü (22 aile x 11 ton) Tailwind'in kendi belgelenen varsayılan paletinden gelir. Tailwind v4 renkleri dahili olarak OKLCH olarak temsil eder, ancak aynı varsayılan palet ve belgelenen hex karşılıkları v3'ten beri değişmemiştir, bu yüzden bu değerler her iki sürüm için de günceldir.
Bir hex aramasının tam eşleşme olmaması ne anlama gelir?
Tailwind'in 242 varsayılan değerinden biri olmayan bir hex kodu yapıştırırsanız (örneğin özel bir marka rengi), araç RGB mesafesine göre en yakın resmi tonu gösterir ve mesafeyi belirterek "En yakın eşleşme" olarak etiketler — girdinizle piksel piksel aynı olmaz, sadece en yakın Tailwind varsayılanı olur.
bg-, text-, border- ve ring- neden aynı numaraları kullanıyor?
Tailwind, her yardımcı sınıf kategorisinde tek bir paylaşılan renk skalası uygular, bu yüzden bg-amber-500, text-amber-500, border-amber-500 ve ring-amber-500 farklı bir CSS özelliğine uygulanan aynı temel hex değeridir. Bu yüzden ayrıntı paneli, aradığınız her ton için dört varyantı birlikte gösterir.
Ton numarası olmadan sadece "blue" gibi bir aile grubunu arayabilir miyim?
Evet — tek başına aile adını yazmak (numara olmadan), belirli bir tonu seçmeden önce yan yana karşılaştırabilmeniz için ızgarayı o ailenin 11 tonuna filtreler.
Bu, yapılandırmamda tanımladığım özel Tailwind tema renklerini kapsıyor mu?
Hayır — bu referans yalnızca Tailwind'in yerleşik varsayılan paletini kapsar, tailwind.config.js theme.extend.colors bloğunda veya v4 @theme bloğunda eklediğiniz veya geçersiz kıldığınız renkleri değil. Projeniz paleti özelleştiriyorsa, gerçek işlenmiş renkleriniz aynı sınıf adı için burada gösterilenden farklı olabilir.