CodeKitHubMikä tämä työkalu on?
Tailwind CSS tarjoaa kiinteän oletusväriasteikon sen sijaan, että antaisi valita mielivaltaisia arvoja yleisille käyttöliittymän väreille. Jokaisessa 22 nimetystä perheestä (kuten amber tai slate) on täsmälleen 11 sävyä, numeroituna 50:stä 950:een, ja jokaisella sävyllä on yksi virallinen hex-arvo, jonka Tailwind itse on dokumentoinut ja jota käytetään samalla tavalla bg-, text-, border- ja ring-utilityissä.
Tämä opas sisältää koko virallisen paletin paikallisesti, joten värin tai luokan nimen etsiminen ei vaadi Tailwindin dokumentaation avaamista, buildin ajamista tai luokan viemistä PurgeCSS:n läpi vain nähdäkseen, miltä se näyttää. Hex-haut käyttävät RGB:n euklidista etäisyyttä löytääkseen lähimmän virallisen sävyn, ja luokkahaut ovat tarkkoja — jokainen tässä oleva arvo vastaa Tailwindin dokumentoituja oletusarvoja.
Miksi käyttää sitä?
- Liitä hex-koodi suunnittelutiedostosta tai kuvakaappauksesta ja saat välittömästi lähimmän Tailwind-luokan nimen sen sijaan, että arvaisit, mitä numeroitua sävyä se vastaa.
- Kirjoita luokan nimi kuten slate-900 tai bg-purple-500 nähdäksesi sen tarkan hex- ja RGB-arvon ilman Tailwindin dokumentaation selaamista.
- Selaa koko 22 perheen x 11 sävyn ruudukkoa vertaillaksesi sävyjä rinnakkain ennen valintaa.
- Saat minkä tahansa sävyn bg-, text-, border- ja ring-variantit yhdellä klikkauksella, koska Tailwind käyttää samaa numeroasteikkoa kaikissa niissä.
- Ilmainen, välitön ja täysin paikallinen — ei latausta, ei tiliä, ei build-vaihetta.
Käyttöohje
- Löytääksesi luokan nimen hex-koodista: kirjoita tai liitä hex-arvo (#-merkillä tai ilman) hakukenttään — lähin virallinen Tailwind-sävy ilmestyy ruudukon yläpuolelle yhdessä värietäisyyden kanssa, jos se ei ole täsmällinen osuma.
- Löytääksesi hex-arvon luokan nimestä: kirjoita luokan tai perheen nimi (esim. amber-500, bg-blue-600 tai pelkkä teal) — täsmällinen osuma näyttää hexin, RGB:n ja kaikki utility-variantit; pelkkä perheen nimi suodattaa ruudukon kyseiseen perheeseen.
- Selataksesi kaikkea: jätä hakukenttä tyhjäksi ja klikkaa mitä tahansa väripalikkaa ruudukossa — sen tiedot ilmestyvät yläpuolella olevaan paneeliin, ja sen hex-koodi kopioituu automaattisesti.
- Klikkaa mitä tahansa bg-/text-/border-/ring-variantin painiketta tietopaneelissa kopioidaksesi tarkan luokan nimen.
Esimerkki
Syöte
#c4b5fdTuloste
violet-300 — Täsmällinen osuma, #C4B5FD, rgb(196, 181, 253)Tämä hex on yksi Tailwindin omista dokumentoiduista oletusarvoista, joten etäisyys on 0 ja osuma on täsmällinen eikä likimääräinen.
Usein kysytyt kysymykset
Ovatko nämä Tailwind CSS:n viralliset oletusvärit?
Kyllä — kaikki 242 hex-arvoa (22 perhettä x 11 sävyä) tulevat Tailwindin omasta dokumentoidusta oletuspaletista. Tailwind v4 esittää värit sisäisesti OKLCH-muodossa, mutta sama oletuspaletti ja sen dokumentoidut hex-vastineet ovat muuttumattomia v3:sta, joten nämä arvot ovat ajantasaisia kummallekin versiolle.
Mitä tarkoittaa, kun hex-haku ei ole täsmällinen osuma?
Jos liität hex-koodin, joka ei ole yksi Tailwindin 242 oletusarvosta (esimerkiksi mukautettu brändiväri), työkalu näyttää lähimmän virallisen sävyn RGB-etäisyyden perusteella ja merkitsee sen "Lähin osuma" -tekstillä, jossa näkyy etäisyys — se ei ole pikselintarkasti identtinen syötteesi kanssa, vaan vain lähin Tailwindin oletusarvo.
Miksi bg-, text-, border- ja ring- käyttävät kaikki samoja numeroita?
Tailwind soveltaa yhtä jaettua väriasteikkoa jokaisessa utility-kategoriassa, joten bg-amber-500, text-amber-500, border-amber-500 ja ring-amber-500 ovat kaikki sama taustalla oleva hex-arvo sovellettuna eri CSS-ominaisuuteen. Siksi tietopaneeli näyttää kaikki neljä varianttia yhdessä minkä tahansa sävyn kohdalla, jota haet.
Voinko hakea perheryhmää kuten pelkkää "blue" ilman sävynumeroa?
Kyllä — pelkän perheen nimen kirjoittaminen (ilman numeroa) suodattaa ruudukon vain kyseisen perheen 11 sävyyn, jotta voit vertailla niitä rinnakkain valitsematta vielä tiettyä sävyä.
Kattaako tämä mukautetut Tailwind-teemavärit, jotka olen määrittänyt konfiguraatiossani?
Ei — tämä opas kattaa vain Tailwindin sisäänrakennetun oletuspaletin, ei värejä, jotka olet lisännyt tai korvannut tailwind.config.js theme.extend.colors -lohkossa tai v4:n @theme-lohkossa. Jos projektisi mukauttaa palettia, todelliset renderöidyt värisi voivat poiketa tässä näkyvistä samalle luokan nimelle.