Tailwind Generator Boja

Generiši paletu od 11 tonaliteta (50–950) Tailwind CSS-a i kod konfiguracije iz jednog Hex koda

Informacije o ažuriranjimaDodato generisanje Tailwind boja, pravi 11 nijansi boje i kod postavki iz 1 bojePogledaj ažuriranja

Karakteristike

Automatski generiši 11 tonaliteta iz 1 boje

Postavi unetu boju na 500 i izračunaj tonove od 50 do 950

Podrška za v3 i v4 format

Prebacuj između config i @theme zapisa na tabulatoru

Kopiraj Hex za svaki tonalitet

Dugme za svaki uzorak boje za kopiranje koda pojedinačne boje

Paleta se ažurira tokom unosa

Bez potrebe za dugmetom za izvršavanje – isprobaj i upoređuj boje u realnom vremenu

Kako koristiti

Unesi Hex koda bazne boje

Unesi Hex kod ili klikni na uzorak boje sa leve strane da otvoriš biraču boja

Po potrebi unesi naziv boje

Unesi naziv boje malim slovima za upotrebu u kodu. Ako je prazno, koristi se primary

Provjeri 11 tonaliteta boje

Provjeri uzorke boja od 50 do 950 i Hex kodove, pa kopiraj po jednu boju pomoću dugmeta za kopiranje

Odaberi format izlaza i kopiraj

Odaberi v3 ili v4 i klikni „Kopiraj kod" da zalipiš u tailwind.config.js ili CSS datoteku

Slučajevi upotrebe

Kreiraj tonalitete brendske boje

Uskladi tonalitete za dugmad i pozadine iz jedne brendske boje

Dodaj boju koja nije u standardnoj paleti

Dodaj projektu specifičnu boju u 11 tonaliteta u datoteku konfiguracije koja nije u Tailwind standardnim bojama

Kreiraj @theme konfiguraciju za v4

Pretvori glavnu boju sajta u Tailwind v4 CSS varijable odjednom

Pripremi implementaciju dizajn kompilacije

Pripremi kodove sa 11 tonaliteta iz boje navedene u kompilaciji i prenesi ih u alat za dizajn

Osnovna znanja

Šta predstavljaju Tailwind tonaliteti 50–950

Boje u Tailwind CSS-u koriste 11 brojčanih nivoa od 50 (najsvetlija) do 950 (najtemnja) za predstavljanje svetline, gde je 500 osnovna boja. Brojevi se koriste na kraju imena klase kao što su „bg-primary-500" ili „text-primary-700".

Tonaliteti 50–300：Tonaliteti od 50 do 300 su svetle boje često korišćene za pozadinu ili laganu ispunu, dovoljno jasne da se tamni tekst lako čita preko njih.
Tonaliteti 600–950：Tonaliteti od 600 do 950 su tamne boje često korišćene za efekte lebdenja dugmadi ili boju teksta naslova, dovoljno vidljive na svetloj pozadini.

Razlika između v3 i v4 u definisanju boja

Tailwind CSS v3 definiše boje u JavaScript-u u tailwind.config.js datoteci, dok v4 definiše boje kao CSS varijable unutar @theme. Oba pristupa omogućavaju upotrebu boja sa istim nazivima klasa kao što je „bg-primary-500".

v3 format：v3 format je zagnjezdeni oblik gde se boje unose kao „primary: { 500: '#3B82F6' }" unutar theme.extend.colors.
v4 format：v4 format koristi CSS varijable sa naznom povezanom crticama kao što je „--color-primary-500: #3B82F6;" unutar @theme.