Denne artikkelen vil forklare:
- Hva gjør skjermer, farger og mellomrom i Tailwind Theme?
- Hvordan bruke skjermer, farger og mellomrom i medvindstema?
- Hvordan konfigurere skjermer, farger og mellomrom i medvindstema?
Hva gjør skjermer, farger og mellomrom i Tailwind Theme?
De skjermer nøkkel tillater brukere å endre de responsive bruddpunktene i Tailwind-prosjektet. Knekkpunkter er punktene der layouten endres basert på skjermbredden. Som standard inkluderer Tailwind fem skjermer, dvs. sm (liten), md (middels), lg (stor) og xl (ekstra stor). Imidlertid kan brukere definere bruddpunktene sine ved å bruke «skjermer»-tasten, og deretter bruke dem i HTML-programmet.
Farger tasten brukes til å endre fargepaletten. Farger er en av de viktigste funksjonene i design. Tailwind-tema gir en standard fargepalett med et bredt spekter av nyanser, men brukere kan også tilpasse det eller utvide det med fargene sine. Brukere kan definere farger ved å bruke 'farger'-tasten, og deretter bruke dem med en hvilken som helst fargerelatert verktøyklasse i HTML-koden.
De mellomrom nøkkelen brukes til å endre avstands- og dimensjoneringsskalaen. Avstand er et annet viktig aspekt ved design, ettersom det påvirker lesbarheten, justeringen og balansen til elementene. Tailwind-temaet gir en konsistent avstandsskala basert på en grunnverdi på 4 piksler (0,25 rem). Den kan imidlertid også tilpasses eller utvides med egendefinerte verdier. Brukere kan definere avstandsverdier ved å bruke 'mellomrom'-tasten, og deretter bruke dem med en hvilken som helst avstandsrelatert verktøyklasse i programfilen.
Hvordan bruke skjermer, farger og mellomrom i medvindstema?
For å bruke skjermer, farger og mellomrom i Tailwind-temaet, lag et HTML-program og bruk standardskjerm, farger og avstandsegenskaper etter behov. Kjør deretter HTML-programmet og se HTML-nettsiden. La oss følge trinnene nedenfor:
Trinn 1: Lag HTML-webside
Lag først et HTML-program og bruk standardskjermen, farger og avstandsegenskaper:
= 'tekst-3xl m-5 sm:tekst-hvit tekst-senter' >
Linux hint!
>
= 'text-2xl m-5 md:text-white text-center' >
Velkommen til denne opplæringen
>
= 'text-2xl m-5 lg:text-white text-center' >
Medvind CSS
>
Velkommen til denne opplæringen
>
= 'text-2xl m-5 lg:text-white text-center' >
Medvind CSS
>
= 'tekst-2xl m-5 xl:tekst-hvit tekst-senter' >
Temaer
>
>
>
Her:
- ' -p-10 ' og ' m-5 ” er avstandsegenskapen.
- ' sm ', ' md ', ' lg ', og ' xl ” er skjermegenskapene.
- ' rød-700 ', ' blå-600 ', ' grønn-500 ', ' rosa-700 ', og ' hvit ” er fargeegenskapene.
Trinn 2: Kjør HTML-programmet
Kjør deretter HTML-programmet for å se HTML-nettsiden:
I utdataene ovenfor kan standardskjermer, farger og avstandsegenskaper sees.
Hvordan konfigurere skjermer, farger og mellomrom i medvindstema?
For å konfigurere skjermer, farger og avstand i Tailwind-temaet, se på de gitte trinnene:
- Åpne ' tailwind.config.js ' fil.
- Gå til ' tema ”-delen og tilpass skjermer, farger og avstandsegenskaper etter behov.
- Bruk de tilpassede egenskapene i HTML-programmet.
- Se HTML-nettsiden for bekreftelse.
Trinn 1: Konfigurer skjermer, farger og mellomrom i Tailwind Config File
I « tema ' delen av ' tailwind.config.js ”-fil, tilpass skjermer, farger og avstandsegenskaper etter behov. For eksempel har vi tilpasset disse egenskapene som følger:
modul .eksporter = {innhold : [ './index.html' ] ,
tema : {
//tilpasse skjermer
skjermer : {
sm : '480px' ,
md : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//tilpasse farger
farger : {
hvit : #ffffff ,
svart : '#000000' ,
blå : '#08609c' ,
grønn : «#089c28» ,
rød : '#9c0306' ,
gul : '#ede60e' ,
rosa : '#ed0e55' ,
} ,
//tilpasse mellomrom
mellomrom : {
px : '1px' ,
'0' : '0' ,
'1' : '0.25rem' ,
'2' : '0,5 rem' ,
'3' : '0.75rem' ,
'4' : '1 ting' ,
'5' : '1.25rem' ,
'6' : '1,5 rem' ,
'8' : '2rem' ,
'10' : '2,5 rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'tjue' : '5rem' ,
}
} ,
} ;
I denne koden:
- « skjermer ”-egenskapen definerer skjermbruddpunkter for forskjellige størrelser. Den gir aliaser (som sm, md, lg, xl) og tilsvarende verdier.
- « farger ”-egenskapen definerer egendefinerte farger ved å bruke deres navn og heksadesimale verdipar.
- « mellomrom egenskapen spesifiserer egendefinerte avstandsverdier for mange størrelser. Den bruker aliaser (som px, 0, 1, 2 osv.) for å representere spesifikke avstandsverdier i 'rem'-enheter.
Trinn 2: Bruk konfigurerte egenskaper i HTML-programmet
Bruk nå de tilpassede egenskapene i HTML-programmet:
= 'tekst-3xl m-5 sm:tekst-hvit tekst-senter' >
Linux hint!
>
= 'text-2xl m-5 md:text-white text-center' >
Velkommen til denne opplæringen
>
= 'text-2xl m-5 lg:text-white text-center' >
Medvind CSS
>
Velkommen til denne opplæringen
>
= 'text-2xl m-5 lg:text-white text-center' >
Medvind CSS
>
= 'tekst-2xl m-5 xl:tekst-hvit tekst-senter' >
Temaer
>
>
>
Trinn 3: Se HTML-nettsiden
Til slutt, verifiser utdataene ved å se HTML-nettsiden:
Det kan observeres at innholdet på nettsiden endres i henhold til de konfigurerte skjermbildene, fargene og avstandsegenskapene.
Konklusjon
De skjermer nøkkelen tillater brukere å tilpasse/endre de responsive bruddpunktene farger tasten brukes til å tilpasse fargepaletten for prosjektet og mellomrom nøkkelen brukes til å tilpasse avstands- og størrelsesskalaen. Dessuten kan brukere tilpasse disse nøklene eller egenskapene i henhold til deres behov. Denne artikkelen har forklart skjermer, farger og mellomrom i Tailwind-temaet.