CodeKitHubČo je tento nástroj?
Tailwind CSS ponúka pevne danú predvolenú farebnú škálu namiesto toho, aby vám umožnil vyberať ľubovoľné hodnoty pre bežné farby používateľského rozhrania. Každá z 22 pomenovaných rodín (napríklad amber alebo slate) má presne 11 odtieňov, číslovaných od 50 do 950, a každý odtieň má jednu oficiálnu hex hodnotu, ktorú dokumentuje samotný Tailwind a ktorá sa používa identicky naprieč utilitami bg-, text-, border- a ring-.
Tento prehľad má celú oficiálnu paletu vloženú lokálne, takže vyhľadanie farby alebo názvu triedy nevyžaduje otváranie dokumentácie Tailwindu, spúšťanie buildu ani preťahovanie triedy cez PurgeCSS len preto, aby ste videli, ako vyzerá. Vyhľadávanie podľa hexu používa RGB euklidovskú vzdialenosť na nájdenie najbližšieho oficiálneho odtieňa a vyhľadávanie podľa triedy je presné — každá hodnota tu zodpovedá zdokumentovaným predvoleným hodnotám Tailwindu.
Prečo ho používať?
- Vložte hex kód z návrhového súboru alebo snímky obrazovky a okamžite získajte najbližší názov triedy Tailwind, namiesto hádania, ktorému číslovanému odtieňu zodpovedá.
- Napíšte názov triedy, napríklad slate-900 alebo bg-purple-500, a zobrazte si presnú hex a RGB hodnotu bez prehľadávania dokumentácie Tailwindu.
- Prehliadajte celú mriežku 22 rodín x 11 odtieňov a porovnávajte odtiene vedľa seba pred výberom.
- Získajte varianty bg-, text-, border- a ring- pre ľubovoľný odtieň jedným kliknutím, pretože Tailwind používa naprieč všetkými rovnakú číselnú škálu.
- Zadarmo, okamžite a plne lokálne — žiadne nahrávanie, žiadny účet, žiadny build krok.
Ako sa používa
- Ak chcete nájsť názov triedy podľa hex kódu: napíšte alebo vložte hex hodnotu (s # alebo bez) do vyhľadávacieho poľa — najbližší oficiálny odtieň Tailwindu sa zobrazí nad mriežkou spolu s farebnou vzdialenosťou, ak nejde o presnú zhodu.
- Ak chcete nájsť hex hodnotu podľa názvu triedy: napíšte názov triedy alebo rodiny (napr. amber-500, bg-blue-600, alebo len teal) — presná zhoda zobrazí hex, RGB a všetky varianty utilít; samotný názov rodiny prefiltruje mriežku na túto rodinu.
- Ak chcete prehliadať všetko: nechajte vyhľadávacie pole prázdne a kliknite na ľubovoľnú vzorku v mriežke — jej detaily sa zobrazia v paneli hore a jej hex kód sa automaticky skopíruje.
- Kliknutím na ľubovoľné tlačidlo varianty bg-/text-/border-/ring- v detailnom paneli skopírujete presný názov danej triedy.
Príklad
Vstup
#c4b5fdVýstup
violet-300 — Presná zhoda, #C4B5FD, rgb(196, 181, 253)Tento hex je jednou z oficiálne zdokumentovaných predvolených hodnôt Tailwindu, takže vzdialenosť je 0 a zhoda je presná, nie približná.
Časté otázky
Sú toto oficiálne predvolené farby Tailwind CSS?
Áno — všetkých 242 hex hodnôt (22 rodín x 11 odtieňov) pochádza z oficiálne zdokumentovanej predvolenej palety Tailwindu. Tailwind v4 interne reprezentuje farby ako OKLCH, ale rovnaká predvolená paleta a jej zdokumentované hex ekvivalenty sa od verzie v3 nezmenili, takže tieto hodnoty platia pre obe verzie.
Čo znamená, keď vyhľadanie podľa hexu nie je presná zhoda?
Ak vložíte hex kód, ktorý nie je jednou z 242 predvolených hodnôt Tailwindu (napríklad vlastná firemná farba), nástroj zobrazí najbližší oficiálny odtieň podľa RGB vzdialenosti a označí ho ako „Najbližšia zhoda“ s uvedenou vzdialenosťou — nebude pixelovo totožný s vaším vstupom, len najbližšia predvolená farba Tailwindu.
Prečo bg-, text-, border- a ring- používajú rovnaké čísla?
Tailwind aplikuje jednu spoločnú farebnú škálu naprieč všetkými kategóriami utilít, takže bg-amber-500, text-amber-500, border-amber-500 a ring-amber-500 sú rovnaká podkladová hex hodnota aplikovaná na inú CSS vlastnosť. Preto detailný panel zobrazuje všetky štyri varianty spolu pre akýkoľvek odtieň, ktorý vyhľadáte.
Môžem vyhľadať celú rodinu, napríklad len „blue“, bez čísla odtieňa?
Áno — zadanie samotného názvu rodiny (bez čísla) prefiltruje mriežku na všetkých 11 odtieňov danej rodiny, takže ich môžete porovnať vedľa seba, bez toho, aby ste zatiaľ vybrali konkrétny odtieň.
Zahŕňa toto vlastné farby motívu Tailwind, ktoré som definoval vo svojej konfigurácii?
Nie — tento prehľad zahŕňa iba vstavanú predvolenú paletu Tailwindu, nie farby, ktoré ste pridali alebo prepísali v bloku tailwind.config.js theme.extend.colors alebo bloku @theme vo v4. Ak váš projekt paletu prispôsobuje, skutočné vykreslené farby sa môžu líšiť od toho, čo je tu zobrazené pre rovnaký názov triedy.