Ta članek bo pojasnil:
- Kaj počnejo zasloni, barve in razmiki v temi Tailwind?
- Kako uporabljati zaslone, barve in razmike v temi Tailwind?
- Kako konfigurirati zaslone, barve in razmike v temi Tailwind?
Kaj počnejo zasloni, barve in razmiki v temi Tailwind?
The zasloni ključ uporabnikom omogoča spreminjanje odzivnih prelomnih točk v projektu Tailwind. Prelomne točke so točke, kjer se postavitev spremeni glede na širino zaslona. Tailwind privzeto vključuje pet zaslonov, tj. sm (majhen), md (srednji), lg (velik) in xl (zelo velik). Vendar pa lahko uporabniki določijo svoje prekinitvene točke s tipko 'screens' in jih nato uporabijo v programu HTML.
Barve tipka se uporablja za spreminjanje barvne palete. Barve so ena najpomembnejših značilnosti oblikovanja. Tema Tailwind ponuja privzeto barvno paleto s široko paleto odtenkov, uporabniki pa jo lahko tudi prilagodijo ali razširijo s svojimi barvami. Uporabniki lahko določijo barve s tipko »barve« in jih nato uporabijo s katerim koli z barvo povezanim razredom pripomočkov v kodi HTML.
The razmik tipka se uporablja za spreminjanje razmika in lestvice velikosti. Razmik je še en pomemben vidik oblikovanja, saj vpliva na berljivost, poravnavo in ravnotežje elementov. Tema Tailwind zagotavlja dosledno lestvico razmikov, ki temelji na osnovni vrednosti 4 slikovnih pik (0,25 rem). Vendar pa ga je mogoče tudi prilagoditi ali razširiti z vrednostmi po meri. Uporabniki lahko definirajo vrednosti razmikov s tipko »razmiki« in jih nato uporabijo s katerim koli razredom pripomočkov, povezanih z razmiki, v programski datoteki.
Kako uporabljati zaslone, barve in razmike v temi Tailwind?
Če želite uporabiti zaslone, barve in razmike v temi Tailwind, naredite program HTML in po potrebi uporabite privzete lastnosti zaslona, barv in razmikov. Nato zaženite program HTML in si oglejte spletno stran HTML. Sledimo spodaj navedenim korakom:
1. korak: Ustvarite spletno stran HTML
Najprej naredite program HTML in uporabite privzete lastnosti zaslona, barv in razmikov:
= 'besedilo-3xl m-5 sm:besedilo-belo središče besedila' >
Namig za Linux!
>
= 'besedilo-2xl m-5 md:besedilo-belo središče besedila' >
Dobrodošli v tej vadnici
>
= 'besedilo-2xl m-5 lg:besedilo-belo središče besedila' >
CSS hrbtnega vetra
>
Dobrodošli v tej vadnici
>
= 'besedilo-2xl m-5 lg:besedilo-belo središče besedila' >
CSS hrbtnega vetra
>
= 'besedilo-2xl m-5 xl:besedilo-belo središče besedila' >
Teme
>
>
>
Tukaj:
- “ -p-10 « in » m-5 ” so lastnost razmika.
- “ sm ”, “ md ”, “ lg «, in » xl ” so lastnosti zaslona.
- “ rdeča-700 ”, “ modra-600 ”, “ zelena-500 ”, “ roza-700 «, in » bela ” so barvne lastnosti.
2. korak: Zaženite program HTML
Nato zaženite program HTML za ogled spletne strani HTML:
V zgornjem izhodu so prikazani privzeti zasloni, barve in lastnosti razmika.
Kako konfigurirati zaslone, barve in razmike v temi Tailwind?
Če želite konfigurirati zaslone, barve in razmike v temi Tailwind, si oglejte podane korake:
- Odprite ' tailwind.config.js ' mapa.
- Pojdi na ' tema ” in po potrebi prilagodite zaslone, barve in lastnosti razmika.
- Uporabite prilagojene lastnosti v programu HTML.
- Oglejte si spletno stran HTML za preverjanje.
1. korak: Konfigurirajte zaslone, barve in razmike v konfiguracijski datoteki Tailwind
V ' tema ' razdelek ' tailwind.config.js ”, prilagodite zaslone, barve in lastnosti razmika glede na potrebe. Na primer, te lastnosti smo prilagodili na naslednji način:
modul .izvozi = {vsebino : [ './index.html' ] ,
tema : {
//prilagajanje zaslonov
zasloni : {
sm : '480px' ,
md : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//prilagajanje barv
barve : {
bela : #ffffff ,
Črna : '#000000' ,
modra : '#08609c' ,
zelena : '#089c28' ,
rdeča : '#9c0306' ,
rumena : '#ede60e' ,
roza : '#ed0e55' ,
} ,
//prilagajanje razmika
razmik : {
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,5 rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'dvajset' : '5rem' ,
}
} ,
} ;
V tej kodi:
- ' zasloni ” lastnost definira prelomne točke zaslona za različne velikosti. Zagotavlja vzdevke (kot so sm, md, lg, xl) in njihove enakovredne vrednosti.
- ' barve ” lastnost definira barve po meri z uporabo njihovih parov imena in šestnajstiške vrednosti.
- ' razmik ” določa vrednosti razmikov po meri za številne velikosti. Uporablja vzdevke (kot so px, 0, 1, 2 itd.) za predstavitev določenih vrednosti razmika v enotah »rem«.
2. korak: Uporabite konfigurirane lastnosti v programu HTML
Zdaj pa uporabite prilagojene lastnosti v programu HTML:
= 'besedilo-3xl m-5 sm:besedilo-belo središče besedila' >
Namig za Linux!
>
= 'besedilo-2xl m-5 md:besedilo-belo središče besedila' >
Dobrodošli v tej vadnici
>
= 'besedilo-2xl m-5 lg:besedilo-belo središče besedila' >
CSS hrbtnega vetra
>
Dobrodošli v tej vadnici
>
= 'besedilo-2xl m-5 lg:besedilo-belo središče besedila' >
CSS hrbtnega vetra
>
= 'besedilo-2xl m-5 xl:besedilo-belo središče besedila' >
Teme
>
>
>
3. korak: Oglejte si spletno stran HTML
Končno preverite izpis z ogledom spletne strani HTML:
Opazimo lahko, da se vsebina spletne strani spreminja glede na konfigurirane zaslone, barve in lastnosti razmika.
Zaključek
The zasloni ključ omogoča uporabnikom, da prilagodijo/spremenijo odzivne prekinitvene točke, barve tipka se uporablja za prilagoditev barvne palete za projekt in razmik tipka se uporablja za prilagajanje razmika in lestvice velikosti. Poleg tega lahko uporabniki te ključe ali lastnosti prilagodijo svojim potrebam. V tem članku so razloženi zasloni, barve in razmiki v temi Tailwind.