Tailwind barvna gradacija
Iz enega Hex koda ustvari 11-stopenjsko barvno paleto Tailwind CSS (50–950) in nastavitveni kod
Lastnosti
Samodejno ustvari 11 stopenj iz ene barve
Vnešeno barvo postavi na 50-ino stopnjo in izračuna intenzitete za 50–950
Podpora za v3 in v4
Preklapljaj med config in @theme oblikami s tabulatorjem
Kopiraj Hex za vsako stopnjo
Kopira barvne kode po posameznih vzorcih s kliki na gumbe
Paleta se posodablja sočasno s vnosom
Brez gumba za izvedbo - primerjaj barve med pisanjem
Kako uporabiti
Vnesi Hex osnovno barvo
Vnesi Hex kod ali klikni na barvni vzorec na levi za izbiro s barvnim izbiralnikom
Po potrebi vnesi ime barve
Vnesi ime barve v malih črkah za uporabo v kodu. Če pustite prazno, se uporabi primary
Preglej 11-stopenjske barvne vzorce
Preveri barvne vzorce in Hex kode za 50–950 ter kopiraj posamezne barve z gumbom za kopiranje
Izberi obliko izpisa in kopiraj
Izberi v3 ali v4 ter s klikom »Kopiraj kod« prilepi v tailwind.config.js ali CSS datoteko
Primeri uporabe
Ustvarjanje barv znamke z različnimi intenzitetami
Iz ene barve znamke ustvari usklajene intenzitete za gumbe in ozadja
Dodajanje barv, ki jih ni v standardni paleti
Dodaj v projektno specifične barve v 11 stopnjah v nastavitveno datoteko
Ustvarjanje nastavitve v4 @theme
Iz glavne barve strani napišeš CSS spremenljivke za Tailwind v4
Priprava za implementacijo ločnega oblikovalskega maketa
Pripravi 11-stopenjske kode iz označene barve in jih prepiši v oblikovalsko orodje
Osnovno znanje
Kaj pomenijo Tailwind koraki 50–950
Barve v Tailwind CSS se izražajo z 11 koraki od 50 (najbolj svetla) do 950 (najbolj temna), pri čemer je 500 osnovna barva. Korake uporabite na koncu imena razreda, na primer »bg-primary-500« ali »text-primary-700«.
- Koraki 50–300：Koraki 50–300 so svetle barve, pogosto uporabljene za ozadja in lahke polnitve. Nad njimi je temno besedilo še vedno berljivo.
- Koraki 600–950：Koraki 600–950 so temne barve, pogosto uporabljene za barve pri prenosu miške na gumbe in naslov besedila. Na belem ozadju so jasno vidne.
Razlike v načinu opredelitve barv med v3 in v4
V Tailwind CSS v3 se barve opredelijo v JavaScriptu v tailwind.config.js, v v4 pa v CSS datoteki kot CSS spremenljivke v @theme. V obeh oblikah se opredeljene barve uporabljajo z istim imenom razreda, kot je »bg-primary-500«.
- Oblik v3：V v3 se barve napišejo vgnezdeno kot »primary: { 500: '#3B82F6' }« v theme.extend.colors.
- Oblik v4：V v4 se barve napišejo kot »--color-primary-500: #3B82F6;« v @theme s spremenljivkami, povezanimi z vezaji.
Varnost in zasebnost
Obdelava v brskalniku
Vneseni podatki se obdelujejo samo v vašem brskalniku in se ne pošiljajo navzven.
Obdelava samo v brskalniku
Izračun palete in ustvarjanje kode se izvaja v celoti v vašem brskalniku, vhodni podatki se ne pošljejo na strežnik.
Komunikacija je šifrirana z HTTPS
Nalaganje strani je tudi šifrirano z TLS in tretje osebe ne morejo prebrati vsebine.
Brez pošiljanja tretjim osebam
Vhodni podatki se ne pošljejo zunanjim storitvam, kot so oglaševalska omrežja ali sledilniki.
Brez samodejnega shranjevanja rezultatov
Vnešena barva in ime barve in vnosne predloge se ne shranjujejo na strežniku.
Spremljaj RAKKOTOOLS na Googlovem iskanju
187 priročnih orodij je sedaj lažje najti na Googlovem iskanju in iskanju z AI!
- Najdeno pri iskanju
- Prikazano tudi pri iskanju z AI
- Odkritje novih orodij
Podatki o posodobitvah
- update #318
Dodana Tailwind ustvarjalnik barv, ustvari 11 odtenkov barve in nastavitveni kode iz ene barve
Izbrana orodja
187 spletnih orodij je brezplačno dostopnih takoj!