CodeKitHubCzym jest to narzędzie?
Tailwind CSS dostarcza stałą, domyślną skalę kolorów zamiast pozwalać na wybór dowolnych wartości dla popularnych kolorów interfejsu. Każda z 22 nazwanych rodzin (np. amber lub slate) ma dokładnie 11 odcieni, numerowanych od 50 do 950, a każdy odcień ma jedną oficjalną wartość hex, udokumentowaną przez sam Tailwind i używaną identycznie we wszystkich narzędziach bg-, text-, border- i ring-.
To odniesienie osadza tę pełną oficjalną paletę lokalnie, więc wyszukiwanie koloru lub nazwy klasy nie wymaga otwierania dokumentacji Tailwind, uruchamiania builda ani wysyłania klasy przez PurgeCSS tylko po to, by zobaczyć, jak wygląda. Wyszukiwanie hex używa odległości euklidesowej RGB, aby znaleźć najbliższy oficjalny odcień, a wyszukiwanie klas jest dokładne — każda wartość tutaj odpowiada udokumentowanym domyślnym ustawieniom Tailwind.
Dlaczego warto go używać?
- Wklej kod hex z pliku projektowego lub zrzutu ekranu i natychmiast uzyskaj najbliższą nazwę klasy Tailwind, zamiast zgadywać, któremu numerowanemu odcieniowi odpowiada.
- Wpisz nazwę klasy, np. slate-900 lub bg-purple-500, aby zobaczyć jej dokładną wartość hex i RGB bez przeszukiwania dokumentacji Tailwind.
- Przeglądaj pełną siatkę 22 rodzin x 11 odcieni, aby porównać odcienie obok siebie przed wyborem.
- Uzyskaj warianty bg-, text-, border- i ring- dla dowolnego odcienia jednym kliknięciem, ponieważ Tailwind używa tej samej skali liczbowej we wszystkich z nich.
- Darmowe, natychmiastowe i w pełni lokalne — bez przesyłania plików, bez konta, bez etapu builda.
Jak używać
- Aby znaleźć nazwę klasy z kodu hex: wpisz lub wklej wartość hex (z # lub bez) w polu wyszukiwania — najbliższy oficjalny odcień Tailwind pojawi się nad siatką, wraz z odległością koloru, jeśli nie jest dokładnym dopasowaniem.
- Aby znaleźć wartość hex z nazwy klasy: wpisz nazwę klasy lub rodziny (np. amber-500, bg-blue-600 lub po prostu teal) — dokładne dopasowanie pokazuje hex, RGB i wszystkie warianty narzędziowe; sama nazwa rodziny filtruje siatkę do tej rodziny.
- Aby przeglądać wszystko: zostaw pole wyszukiwania puste i kliknij dowolną próbkę w siatce — jej szczegóły pojawią się w panelu powyżej, a jej kod hex zostanie automatycznie skopiowany.
- Kliknij dowolny z przycisków wariantów bg-/text-/border-/ring- w panelu szczegółów, aby skopiować dokładną nazwę klasy.
Przykład
Wejście
#c4b5fdWynik
violet-300 — Dokładne dopasowanie, #C4B5FD, rgb(196, 181, 253)Ten kod hex jest jedną z oficjalnie udokumentowanych domyślnych wartości Tailwind, więc odległość wynosi 0, a dopasowanie jest dokładne, a nie przybliżone.
Najczęściej zadawane pytania
Czy to są oficjalne domyślne kolory Tailwind CSS?
Tak — wszystkie 242 wartości hex (22 rodziny x 11 odcieni) pochodzą z oficjalnie udokumentowanej domyślnej palety Tailwind. Tailwind v4 reprezentuje kolory wewnętrznie jako OKLCH, ale ta sama domyślna paleta i jej udokumentowane odpowiedniki hex pozostają niezmienione od v3, więc te wartości są aktualne dla obu wersji.
Co oznacza, gdy wyszukiwanie hex nie jest dokładnym dopasowaniem?
Jeśli wklejasz kod hex, który nie jest jedną z 242 domyślnych wartości Tailwind (np. niestandardowy kolor marki), narzędzie pokazuje najbliższy oficjalny odcień według odległości RGB i oznacza go jako "Najbliższe dopasowanie" z podaną odległością — nie będzie identyczny piksel po pikselu z Twoim wejściem, tylko najbliższy domyślny kolor Tailwind.
Dlaczego bg-, text-, border- i ring- używają tych samych numerów?
Tailwind stosuje jedną wspólną skalę kolorów we wszystkich kategoriach narzędzi, więc bg-amber-500, text-amber-500, border-amber-500 i ring-amber-500 to ta sama wartość hex zastosowana do innej właściwości CSS. Dlatego panel szczegółów pokazuje wszystkie cztery warianty razem dla każdego wyszukiwanego odcienia.
Czy mogę wyszukać grupę rodziny, np. "blue", bez numeru odcienia?
Tak — wpisanie samej nazwy rodziny (bez numeru) filtruje siatkę do 11 odcieni tej rodziny, aby móc je porównać obok siebie, zanim wybierzesz konkretny odcień.
Czy to obejmuje niestandardowe kolory motywu Tailwind, które zdefiniowałem w konfiguracji?
Nie — to odniesienie obejmuje tylko wbudowaną domyślną paletę Tailwind, a nie kolory dodane lub nadpisane w bloku tailwind.config.js theme.extend.colors lub bloku @theme w v4. Jeśli Twój projekt dostosowuje paletę, rzeczywiste renderowane kolory mogą różnić się od pokazanych tutaj dla tej samej nazwy klasy.