CodeKitHubKas yra šis įrankis?
„Tailwind CSS“ siūlo fiksuotą numatytąją spalvų skalę, o ne leidžia rinktis savavališkas reikšmes dažniausiai naudojamoms sąsajos spalvoms. Kiekviena iš 22 pavadintų šeimų (pvz., amber ar slate) turi lygiai 11 atspalvių, sunumeruotų nuo 50 iki 950, o kiekvienas atspalvis turi vieną oficialią hex reikšmę, kurią dokumentuoja pati „Tailwind“ ir kuri identiškai naudojama bg-, text-, border- ir ring- utility klasėse.
Šis žinynas lokaliai talpina visą oficialią paletę, todėl ieškant spalvos ar klasės pavadinimo nereikia atidaryti „Tailwind“ dokumentacijos, paleisti kūrimo (build) proceso ar siųsti klasės per PurgeCSS vien tam, kad pamatytumėte, kaip ji atrodo. Hex paieškos naudoja Euklido atstumą RGB erdvėje, kad rastų artimiausią oficialų atspalvį, o klasių paieškos yra tikslios — kiekviena čia esanti reikšmė atitinka „Tailwind“ dokumentuotas numatytąsias reikšmes.
Kodėl jį naudoti?
- Įklijuokite hex kodą iš dizaino failo ar ekrano nuotraukos ir iškart gaukite artimiausią „Tailwind“ klasės pavadinimą, užuot spėlioję, kuriam sunumeruotam atspalviui jis atitinka.
- Įveskite klasės pavadinimą, pvz., slate-900 ar bg-purple-500, kad pamatytumėte tikslią jo hex ir RGB reikšmę, neieškodami „Tailwind“ dokumentacijoje.
- Naršykite visą 22 šeimų x 11 atspalvių tinklelį, kad prieš pasirinkdami palygintumėte atspalvius greta.
- Vienu paspaudimu gaukite bet kurio atspalvio bg-, text-, border- ir ring- variantus, nes „Tailwind“ visiems jiems naudoja tą pačią skaitinę skalę.
- Nemokamai, akimirksniu ir visiškai lokaliai — jokio įkėlimo, jokios paskyros, jokio kūrimo (build) žingsnio.
Kaip naudoti
- Norėdami rasti klasės pavadinimą iš hex kodo: įveskite arba įklijuokite hex reikšmę (su # arba be jo) paieškos lauke — artimiausias oficialus „Tailwind“ atspalvis parodomas virš tinklelio kartu su spalvų atstumu, jei tai nėra tikslus atitikmuo.
- Norėdami rasti hex reikšmę iš klasės pavadinimo: įveskite klasės ar šeimos pavadinimą (pvz., amber-500, bg-blue-600 arba tiesiog teal) — tikslus atitikmuo parodo hex, RGB ir visus utility variantus; vien šeimos pavadinimas nufiltruoja tinklelį iki tos šeimos.
- Norėdami naršyti viską: palikite paieškos lauką tuščią ir spustelėkite bet kurį pavyzdį tinklelyje — jo informacija atsiranda viršuje esančiame skydelyje, o jo hex kodas nukopijuojamas automatiškai.
- Spustelėkite bet kurį iš bg-/text-/border-/ring- variantų mygtukų informacijos skydelyje, kad nukopijuotumėte tikslų klasės pavadinimą.
Pavyzdys
Įvestis
#c4b5fdIšvestis
violet-300 — Tikslus atitikmuo, #C4B5FD, rgb(196, 181, 253)Šis hex yra viena iš pačios „Tailwind“ dokumentuotų numatytųjų reikšmių, todėl atstumas yra 0, o atitikmuo yra tikslus, o ne apytikslis.
Dažniausiai užduodami klausimai
Ar tai oficialios „Tailwind CSS“ numatytosios spalvos?
Taip — visos 242 hex reikšmės (22 šeimos x 11 atspalvių) yra iš pačios „Tailwind“ dokumentuotos numatytosios paletės. „Tailwind“ v4 spalvas vidiniu lygmeniu vaizduoja kaip OKLCH, tačiau ta pati numatytoji paletė ir jos dokumentuoti hex ekvivalentai nepakito nuo v3, todėl šios reikšmės aktualios abiem versijoms.
Ką reiškia, kai hex paieška nėra tikslus atitikmuo?
Jei įklijuojate hex kodą, kuris nėra viena iš 242 „Tailwind“ numatytųjų reikšmių (pvz., pasirinktinė prekės ženklo spalva), įrankis pagal RGB atstumą parodo artimiausią oficialų atspalvį ir pažymi jį kaip „Artimiausias atitikmuo“ su nurodytu atstumu — jis nebus pikselis tikslumo tapatus jūsų įvestai reikšmei, o tik artimiausia „Tailwind“ numatytoji reikšmė.
Kodėl bg-, text-, border- ir ring- visi naudoja tuos pačius skaičius?
„Tailwind“ visose utility kategorijose taiko vieną bendrą spalvų skalę, todėl bg-amber-500, text-amber-500, border-amber-500 ir ring-amber-500 iš esmės yra ta pati hex reikšmė, taikoma skirtingai CSS savybei. Todėl informacijos skydelyje visi keturi variantai rodomi kartu bet kuriam ieškomam atspalviui.
Ar galiu ieškoti šeimos grupės, pvz., vien „blue“, be atspalvio numerio?
Taip — įvedus vien šeimos pavadinimą (be numerio), tinklelis nufiltruojamas iki tos šeimos 11 atspalvių, kad galėtumėte juos palyginti greta, dar nepasirinkę konkretaus atspalvio.
Ar tai apima pasirinktines „Tailwind“ temos spalvas, kurias apibrėžiau savo konfigūracijoje?
Ne — šis žinynas apima tik įmontuotą numatytąją „Tailwind“ paletę, o ne spalvas, kurias pridėjote ar perrašėte tailwind.config.js theme.extend.colors bloke ar v4 @theme bloke. Jei jūsų projektas pritaiko paletę, jūsų faktiškai atvaizduojamos spalvos gali skirtis nuo čia rodomų tam pačiam klasės pavadinimui.