Denne artikel vil forklare:
- Hvad gør skærme, farver og mellemrum i Tailwind Theme?
- Hvordan bruger man skærme, farver og mellemrum i medvindstema?
- Hvordan konfigurerer man skærme, farver og mellemrum i medvindstema?
Hvad gør skærme, farver og mellemrum i Tailwind Theme?
Det skærme nøglen tillader brugere at ændre de responsive breakpoints i Tailwind-projektet. Knækpunkter er de punkter, hvor layoutet ændres baseret på skærmbredden. Som standard inkluderer Tailwind fem skærme, dvs. sm (lille), md (medium), lg (stor) og xl (ekstra stor). Brugere kan dog definere deres brudpunkter ved hjælp af 'skærme'-tasten og derefter bruge dem i HTML-programmet.
Farver tasten bruges til at ændre farvepaletten. Farver er en af de mest centrale funktioner i design. Tailwind-tema giver en standardfarvepalet med en bred vifte af nuancer, men brugere kan også tilpasse det eller udvide det med deres farver. Brugere kan definere farver ved hjælp af 'farver'-tasten og derefter bruge dem med enhver farverelateret hjælpeklasse i HTML-koden.
Det mellemrum tasten bruges til at ændre afstands- og størrelsesskalaen. Afstand er et andet væsentligt aspekt af design, da det påvirker læsbarheden, justeringen og balancen af elementer. Tailwind-temaet giver en konsistent afstandsskala baseret på en basisværdi på 4 pixels (0,25rem). Den kan dog også tilpasses eller udvides med brugerdefinerede værdier. Brugere kan definere afstandsværdier ved hjælp af 'mellemrum'-tasten og derefter bruge dem med enhver afstandsrelateret hjælpeklasse i programfilen.
Hvordan bruger man skærme, farver og mellemrum i medvindstema?
For at bruge skærmbilleder, farver og mellemrum i Tailwind-temaet skal du lave et HTML-program og bruge standardskærmen, farverne og afstandsegenskaberne efter behov. Kør derefter HTML-programmet og se HTML-websiden. Lad os følge nedenstående trin:
Trin 1: Opret HTML-webside
Først skal du lave et HTML-program og bruge standardskærmen, farverne og afstandsegenskaberne:
= 'tekst-3xl m-5 sm:tekst-hvid tekst-center' >
Linux-tip!
>
= 'text-2xl m-5 md:text-white text-center' >
Velkommen til denne vejledning
>
= 'text-2xl m-5 lg:text-white text-center' >
Medvind CSS
>
Velkommen til denne vejledning
>
= 'text-2xl m-5 lg:text-white text-center' >
Medvind CSS
>
= 'tekst-2xl m-5 xl:tekst-hvid tekst-center' >
Temaer
>
>
>
Her:
- “ -p-10 ' og ' m-5 ” er afstandsegenskaben.
- “ sm ', ' md ', ' lg ', og ' xl ” er skærmegenskaberne.
- “ rød-700 ', ' blå-600 ', ' grøn-500 ', ' pink-700 ', og ' hvid ” er farveegenskaberne.
Trin 2: Kør HTML-programmet
Kør derefter HTML-programmet for at se HTML-websiden:
I ovenstående output kan standardskærme, farver og afstandsegenskaber ses.
Hvordan konfigurerer man skærme, farver og mellemrum i medvindstema?
For at konfigurere skærmbilleder, farver og mellemrum i Tailwind-temaet, se de givne trin:
- Åbn ' tailwind.config.js ' fil.
- Gå til ' tema ” sektion og tilpas skærme, farver og afstandsegenskaber efter behov.
- Brug de tilpassede egenskaber i HTML-programmet.
- Se HTML-websiden for bekræftelse.
Trin 1: Konfigurer skærmbilleder, farver og afstand i Tailwind Config File
I ' tema ' sektion af ' tailwind.config.js ” fil, tilpasse skærmbilleder, farver og afstandsegenskaber efter behov. For eksempel har vi tilpasset disse egenskaber som følger:
modul .eksport = {indhold : [ './index.html' ] ,
tema : {
//tilpasning af skærme
skærme : {
sm : '480px' ,
md : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//tilpasning af farver
farver : {
hvid : #ffffff ,
sort : '#000000' ,
blå : '#08609c' ,
grøn : '#089c28' ,
rød : '#9c0306' ,
gul : '#ede60e' ,
lyserød : '#ed0e55' ,
} ,
//tilpasning af mellemrum
mellemrum : {
px : '1px' ,
'0' : '0' ,
'1' : '0.25rem' ,
'2' : '0.5rem' ,
'3' : '0.75rem' ,
'4' : '1 ting' ,
'5' : '1.25rem' ,
'6' : '1,5 rem' ,
'8' : '2rem' ,
'10' : '2,5 rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'tyve' : '5rem' ,
}
} ,
} ;
I denne kode:
- Det ' skærme ” egenskab definerer skærmbrudpunkter for forskellige størrelser. Det giver aliaser (såsom sm, md, lg, xl) og deres tilsvarende værdier.
- Det ' farver egenskaben definerer brugerdefinerede farver ved hjælp af deres navn og hexadecimale værdipar.
- Det ' mellemrum ” egenskab angiver tilpassede afstandsværdier for mange størrelser. Den bruger aliaser (såsom px, 0, 1, 2 osv.) til at repræsentere specifikke afstandsværdier i 'rem'-enheder.
Trin 2: Brug konfigurerede egenskaber i HTML-program
Brug nu de tilpassede egenskaber i HTML-programmet:
= 'tekst-3xl m-5 sm:tekst-hvid tekst-center' >
Linux-tip!
>
= 'text-2xl m-5 md:text-white text-center' >
Velkommen til denne vejledning
>
= 'text-2xl m-5 lg:text-white text-center' >
Medvind CSS
>
Velkommen til denne vejledning
>
= 'text-2xl m-5 lg:text-white text-center' >
Medvind CSS
>
= 'tekst-2xl m-5 xl:tekst-hvid tekst-center' >
Temaer
>
>
>
Trin 3: Se HTML-webside
Til sidst skal du kontrollere outputtet ved at se HTML-websiden:
Det kan observeres, at indholdet af websiden ændres i henhold til de konfigurerede skærme, farver og afstandsegenskaber.
Konklusion
Det skærme nøglen tillader brugere at tilpasse/ændre de responsive brudpunkter, den farver tasten bruges til at tilpasse farvepaletten til projektet og mellemrum nøglen bruges til at tilpasse afstands- og størrelsesskalaen. Desuden kan brugere tilpasse disse nøgler eller egenskaber efter deres behov. Denne artikel har forklaret skærmbilleder, farver og mellemrum i Tailwind-temaet.