CodeKitHubHvað er þetta verkfæri?
Tailwind CSS býður upp á fastan sjálfgefinn litakvarða í stað þess að leyfa þér að velja handahófskennd gildi fyrir algenga viðmótsliti. Hver af 22 nefndum ættum (eins og amber eða slate) hefur nákvæmlega 11 tóna, númeraða frá 50 til 950, og hver tónn hefur eitt opinbert hex-gildi sem Tailwind sjálft skjalfestir og notar á sama hátt í bg-, text-, border- og ring- utility-flokkum.
Þetta viðmið felur í sér allt opinbera litaspjaldið á staðnum, þannig að uppfletting á lit eða flokksheiti krefst ekki þess að opna skjölun Tailwind, keyra samsetningu eða senda flokkinn í gegnum PurgeCSS bara til að sjá hvernig hann lítur út. Hex-uppflettingar nota evklíska fjarlægð í RGB til að finna næsta opinbera tón, og flokksuppflettingar eru nákvæmar — hvert gildi hér samsvarar skjalfestum sjálfgefnum gildum Tailwind.
Af hverju að nota það?
- Límdu hex-kóða úr hönnunarskrá eða skjámynd og fáðu samstundis næsta Tailwind flokksheiti í stað þess að giska á hvaða númeraða tóni hann samsvarar.
- Skrifaðu flokksheiti eins og slate-900 eða bg-purple-500 til að sjá nákvæmt hex- og RGB-gildi þess án þess að leita í skjölun Tailwind.
- Skoðaðu allt netið af 22 ættum x 11 tónum til að bera saman tóna hlið við hlið áður en þú velur einn.
- Fáðu bg-, text-, border- og ring- afbrigði fyrir hvaða tón sem er með einum smelli, þar sem Tailwind notar sama tölukvarða fyrir þau öll.
- Ókeypis, samstundis og algjörlega staðbundið — engin upphleðsla, enginn reikningur, ekkert samsetningarþrep.
Hvernig á að nota það
- Til að finna flokksheiti úr hex-kóða: skrifaðu eða límdu hex-gildið (með eða án #) í leitarreitinn — næsti opinberi Tailwind tónn birtist fyrir ofan netið, ásamt litafjarlægðinni ef það er ekki nákvæm samsvörun.
- Til að finna hex-gildi úr flokksheiti: skrifaðu flokks- eða ættarheiti (t.d. amber-500, bg-blue-600, eða bara teal) — nákvæm samsvörun sýnir hex, RGB og öll utility afbrigði; ættarheiti eitt og sér síar netið niður í þá ætt.
- Til að skoða allt: skildu leitarreitinn eftir tóman og smelltu á hvaða litasýnishorn sem er í netinu — upplýsingar þess birtast í spjaldinu fyrir ofan og hex-kóði þess er afritaður sjálfkrafa.
- Smelltu á einhvern af bg-/text-/border-/ring- afbrigðahnöppunum í upplýsingaspjaldinu til að afrita nákvæma flokksheitið.
Dæmi
Inntak
#c4b5fdÚttak
violet-300 — Nákvæm samsvörun, #C4B5FD, rgb(196, 181, 253)Þessi hex er eitt af eigin skjalfestum sjálfgefnum gildum Tailwind, þannig að fjarlægðin er 0 og samsvörunin er nákvæm frekar en áætluð.
Algengar spurningar
Eru þetta opinberir sjálfgefnir litir Tailwind CSS?
Já — öll 242 hex-gildin (22 ættir x 11 tónar) koma frá eigin skjalfestu sjálfgefnu litaspjaldi Tailwind. Tailwind v4 sýnir liti innbyrðis sem OKLCH, en sama sjálfgefna litaspjald og skjalfest hex-jafngildi þess eru óbreytt frá v3, þannig að þessi gildi eiga við um báðar útgáfur.
Hvað þýðir það þegar hex-uppfletting er ekki nákvæm samsvörun?
Ef þú límir hex-kóða sem er ekki eitt af 242 sjálfgefnum gildum Tailwind (til dæmis sérsniðinn vörumerkjalit), sýnir tólið næsta opinbera tón út frá RGB-fjarlægð og merkir hann sem "Næsta samsvörun" með fjarlægðina sýnda — hann verður ekki pixla-nákvæmlega eins og inntakið þitt, aðeins næsta sjálfgefna gildi Tailwind.
Af hverju nota bg-, text-, border- og ring- öll sömu tölurnar?
Tailwind beitir einum sameiginlegum litakvarða yfir alla utility-flokka, þannig að bg-amber-500, text-amber-500, border-amber-500 og ring-amber-500 eru öll sama undirliggjandi hex-gildið beitt á mismunandi CSS-eiginleika. Þess vegna sýnir upplýsingaspjaldið öll fjögur afbrigðin saman fyrir hvaða tón sem þú flettir upp.
Get ég flett upp ættarhópi eins og bara "blue" án tóntölu?
Já — að skrifa ættarheiti eitt og sér (án tölu) síar netið niður í aðeins 11 tóna þeirrar ættar svo þú getir borið þá saman hlið við hlið, án þess að hafa valið ákveðinn tón ennþá.
Nær þetta yfir sérsniðna Tailwind þemaliti sem ég hef skilgreint í stillingunni minni?
Nei — þetta viðmið nær aðeins yfir innbyggða sjálfgefna litaspjald Tailwind, ekki liti sem þú hefur bætt við eða yfirskrifað í tailwind.config.js theme.extend.colors blokk eða v4 @theme blokk. Ef verkefnið þitt sérsniður litaspjaldið geta raunverulegir birtir litir þínir verið frábrugðnir því sem sýnt er hér fyrir sama flokksheiti.