Ovaj će članak objasniti:
- Što zasloni, boje i razmaci rade u temi Tailwind?
- Kako koristiti zaslone, boje i razmake u temi Tailwind?
- Kako konfigurirati zaslone, boje i razmake u temi Tailwind?
Što zasloni, boje i razmaci rade u temi Tailwind?
The ekrani ključ omogućuje korisnicima izmjenu responzivnih prijelomnih točaka u projektu Tailwind. Prijelomne točke su točke na kojima se izgled mijenja ovisno o širini zaslona. Prema zadanim postavkama, Tailwind uključuje pet zaslona, tj. sm (mali), md (srednji), lg (veliki) i xl (izuzetno veliki). Međutim, korisnici mogu definirati svoje prijelomne točke pomoću tipke 'screens', a zatim ih koristiti u HTML programu.
Boje tipka se koristi za izmjenu palete boja. Boje su jedno od najvažnijih obilježja dizajna. Tema Tailwind pruža zadanu paletu boja sa širokim rasponom nijansi, ali korisnici je također mogu prilagoditi ili proširiti svojim bojama. Korisnici mogu definirati boje pomoću tipke 'boje', a zatim ih koristiti s bilo kojom klasom uslužnih programa vezanih uz boju u HTML kodu.
The razmaci tipka se koristi za izmjenu razmaka i skale veličine. Razmak je još jedan bitan aspekt dizajna, jer utječe na čitljivost, poravnanje i ravnotežu elemenata. Tema Tailwind pruža dosljednu ljestvicu razmaka temeljenu na osnovnoj vrijednosti od 4 piksela (0,25 rem). Međutim, također se može prilagoditi ili proširiti prilagođenim vrijednostima. Korisnici mogu definirati vrijednosti razmaka pomoću tipke 'razmak', a zatim ih koristiti s bilo kojom klasom pomoćnih programa koja se odnosi na razmake u programskoj datoteci.
Kako koristiti zaslone, boje i razmake u temi Tailwind?
Da biste koristili zaslone, boje i razmake u temi Tailwind, napravite HTML program i upotrijebite zadana svojstva zaslona, boja i razmaka prema potrebi. Zatim pokrenite HTML program i pogledajte HTML web stranicu. Slijedimo dolje navedene korake:
Korak 1: Stvorite HTML web stranicu
Najprije napravite HTML program i upotrijebite zadana svojstva zaslona, boja i razmaka:
= 'text-3xl m-5 sm:text-white text-center' >
Linux savjet!
>
= 'text-2xl m-5 md:text-white text-center' >
Dobrodošli u ovaj vodič
>
= 'text-2xl m-5 lg:text-white text-center' >
Stražnji vjetar CSS
>
Dobrodošli u ovaj vodič
>
= 'text-2xl m-5 lg:text-white text-center' >
Stražnji vjetar CSS
>
= 'text-2xl m-5 xl:text-white text-center' >
Teme
>
>
>
Ovdje:
- “ -p-10 ' i ' m-5 ” su svojstvo razmaka.
- “ sm ”, “ doktor medicine ”, “ lg ', i ' xl ” su svojstva zaslona.
- “ crvena-700 ”, “ plava-600 ”, “ zelena-500 ”, “ ružičasta-700 ', i ' bijela ” su svojstva boje.
Korak 2: Pokrenite HTML program
Zatim pokrenite HTML program za pregled HTML web stranice:
U gornjem izlazu mogu se vidjeti zadani zasloni, boje i svojstva razmaka.
Kako konfigurirati zaslone, boje i razmake u temi Tailwind?
Da biste konfigurirali zaslone, boje i razmake u temi Tailwind, pogledajte dane korake:
- Otvori ' tailwind.config.js ' datoteka.
- Idi na ' tema ” i prema potrebi prilagodite zaslone, boje i svojstva razmaka.
- Koristite prilagođena svojstva u HTML programu.
- Pogledajte HTML web stranicu radi provjere.
Korak 1: Konfigurirajte zaslone, boje i razmake u konfiguracijskoj datoteci Tailwind
u ' tema ' odjeljak ' tailwind.config.js ”, prilagodite zaslone, boje i svojstva razmaka prema potrebi. Na primjer, prilagodili smo ova svojstva na sljedeći način:
modul .izvozi = {sadržaj : [ './index.html' ] ,
tema : {
//prilagodba zaslona
ekrani : {
sm : '480px' ,
doktor medicine : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//prilagodba boja
boje : {
bijela : #ffffff ,
crno : '#000000' ,
plava : '#08609c' ,
zelena : '#089c28' ,
Crvena : '#9c0306' ,
žuta boja : '#ede60e' ,
ružičasta : '#ed0e55' ,
} ,
//prilagodba razmaka
razmaci : {
px : '1px' ,
'0' : '0' ,
'1' : '0,25rem' ,
'2' : '0,5rem' ,
'3' : '0,75rem' ,
'4' : '1 stvar' ,
'5' : '1,25rem' ,
'6' : '1,5 rem' ,
'8' : '2rem' ,
'10' : '2,5rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'dvadeset' : '5rem' ,
}
} ,
} ;
U ovom kodu:
- ' ekrani ” svojstvo definira prijelomne točke zaslona za različite veličine. Omogućuje pseudonime (kao što su sm, md, lg, xl) i njihove ekvivalentne vrijednosti.
- ' boje ” svojstvo definira prilagođene boje koristeći njihov naziv i parove heksadecimalne vrijednosti.
- ' razmaci ” Svojstvo navodi prilagođene vrijednosti razmaka za mnoge veličine. Koristi pseudonime (kao što su px, 0, 1, 2 itd.) za predstavljanje specifičnih vrijednosti razmaka u jedinicama 'rem'.
Korak 2: Koristite konfigurirana svojstva u HTML programu
Sada upotrijebite prilagođena svojstva u HTML programu:
= 'text-3xl m-5 sm:text-white text-center' >
Linux savjet!
>
= 'text-2xl m-5 md:text-white text-center' >
Dobrodošli u ovaj vodič
>
= 'text-2xl m-5 lg:text-white text-center' >
Stražnji vjetar CSS
>
Dobrodošli u ovaj vodič
>
= 'text-2xl m-5 lg:text-white text-center' >
Stražnji vjetar CSS
>
= 'text-2xl m-5 xl:text-white text-center' >
Teme
>
>
>
Korak 3: Pregledajte HTML web stranicu
Na kraju, provjerite izlaz gledajući HTML web stranicu:
Može se primijetiti da se sadržaj web stranice mijenja u skladu s konfiguriranim zaslonima, bojama i svojstvima razmaka.
Zaključak
The ekrani ključ dopušta korisnicima da prilagode/izmijene osjetljive prijelomne točke, boje ključ se koristi za prilagodbu palete boja za projekt i razmaci tipka se koristi za prilagodbu razmaka i veličine. Štoviše, korisnici mogu prilagoditi ove ključeve ili svojstva prema svojim potrebama. Ovaj članak objašnjava zaslone, boje i razmake u temi Tailwind.