Dit artikel legt uit:
- Wat doen schermen, kleuren en spatiëring in Tailwind-thema?
- Hoe gebruik je schermen, kleuren en spatiëring in Tailwind-thema?
- Hoe schermen, kleuren en spatiëring configureren in Tailwind-thema?
Wat doen schermen, kleuren en spatiëring in Tailwind-thema?
De schermen key stelt gebruikers in staat om de responsieve breekpunten in het Tailwind-project te wijzigen. Breekpunten zijn de punten waar de lay-out verandert op basis van de schermbreedte. Tailwind bevat standaard vijf schermen, d.w.z. sm (klein), md (medium), lg (groot) en xl (extra groot). Gebruikers kunnen echter hun breekpunten definiëren met behulp van de 'screens'-toets en deze vervolgens gebruiken in het HTML-programma.
Kleuren toets wordt gebruikt om het kleurenpalet te wijzigen. Kleuren zijn een van de belangrijkste kenmerken van design. Tailwind-thema biedt een standaardkleurenpalet met een breed scala aan tinten, maar gebruikers kunnen het ook aanpassen of uitbreiden met hun eigen kleuren. Gebruikers kunnen kleuren definiëren met behulp van de toets 'kleuren' en deze vervolgens gebruiken met elke kleurgerelateerde hulpprogrammaklasse in de HTML-code.
De spatiëring toets wordt gebruikt om de afstand en maatschaal te wijzigen. Afstand is een ander essentieel aspect van ontwerp, omdat het de leesbaarheid, uitlijning en balans van elementen beïnvloedt. Het Tailwind-thema biedt een consistente afstandsschaal op basis van een basiswaarde van 4 pixels (0,25rem). Het kan echter ook worden aangepast of uitgebreid met aangepaste waarden. Gebruikers kunnen spatiëringswaarden definiëren met behulp van de 'spatiëring' -toets en deze vervolgens gebruiken met elke spatiëringsgerelateerde hulpprogrammaklasse in het programmabestand.
Hoe gebruik je schermen, kleuren en spatiëring in Tailwind-thema?
Om schermen, kleuren en spatiëring in het Tailwind-thema te gebruiken, maakt u een HTML-programma en gebruikt u de standaardscherm-, kleuren- en spatiëringseigenschappen zoals vereist. Voer vervolgens het HTML-programma uit en bekijk de HTML-webpagina. Laten we de onderstaande stappen volgen:
Stap 1: HTML-webpagina maken
Maak eerst een HTML-programma en gebruik de standaardscherm-, kleuren- en spatiëringseigenschappen:
= 'text-3xl m-5 sm:text-white text-center' >
Linux-tip!
>
= 'text-2xl m-5 md:text-white text-center' >
Welkom bij deze zelfstudie
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind-CSS
>
Welkom bij deze zelfstudie
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind-CSS
>
= 'tekst-2xl m-5 xl:tekst-wit tekst-center' >
Thema's
>
>
>
Hier:
- “ -p-10 ' En ' m-5 ” zijn de spatiëringseigenschap.
- “ sm ”, “ md ”, “ lg ', En ' xl ” zijn de schermeigenschappen.
- “ rood-700 ”, “ blauw-600 ”, “ groen-500 ”, “ roze-700 ', En ' wit ” zijn de kleureigenschappen.
Stap 2: voer het HTML-programma uit
Voer vervolgens het HTML-programma uit om de HTML-webpagina te bekijken:
In de bovenstaande uitvoer zijn de standaardschermen, kleuren en spatiëringseigenschappen te zien.
Hoe schermen, kleuren en spatiëring configureren in Tailwind-thema?
Bekijk de gegeven stappen om schermen, kleuren en afstand in het Tailwind-thema te configureren:
- Open de ' staartwind.config.js ' bestand.
- Ga naar de “ thema ” sectie en pas de schermen, kleuren en spatiëringseigenschappen naar wens aan.
- Gebruik de aangepaste eigenschappen in het HTML-programma.
- Bekijk de HTML-webpagina ter verificatie.
Stap 1: Configureer schermen, kleuren en spatiëring in Tailwind-configuratiebestand
In de ' thema ” sectie van de “ staartwind.config.js ”-bestand, pas de schermen, kleuren en spatiëringseigenschappen naar behoefte aan. We hebben deze eigenschappen bijvoorbeeld als volgt aangepast:
moduul .export = {inhoud : [ './index.html' ] ,
thema : {
//schermen aanpassen
schermen : {
sm : '480 pixels' ,
md : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//kleuren aanpassen
kleuren : {
wit : #ffffff ,
zwart : '#000000' ,
blauw : '#08609c' ,
groente : '#089c28' ,
rood : '#9c0306' ,
geel : '#ede60e' ,
roze : '#ed0e55' ,
} ,
// spatiëring aanpassen
spatiëring : {
px : '1px' ,
'0' : '0' ,
'1' : '0.25 rem' ,
'2' : '0.5rem' ,
'3' : '0.75 rem' ,
'4' : '1 ding' ,
'5' : '1.25rem' ,
'6' : '1.5rem' ,
'8' : '2rem' ,
'10' : '2.5 rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'twintig' : '5rem' ,
}
} ,
} ;
In deze code:
- De ' schermen ” eigenschap definieert schermonderbrekingspunten voor verschillende formaten. Het biedt aliassen (zoals sm, md, lg, xl) en hun equivalente waarden.
- De ' kleuren ” eigenschap definieert aangepaste kleuren met behulp van hun naam en hexadecimale waardeparen.
- De ' spatiëring ” eigenschap specificeert aangepaste afstandswaarden voor veel formaten. Het gebruikt aliassen (zoals px, 0, 1, 2, etc.) om specifieke spatiëringswaarden weer te geven in 'rem'-eenheden.
Stap 2: Gebruik geconfigureerde eigenschappen in HTML-programma
Gebruik nu de aangepaste eigenschappen in het HTML-programma:
= 'text-3xl m-5 sm:text-white text-center' >
Linux-tip!
>
= 'text-2xl m-5 md:text-white text-center' >
Welkom bij deze zelfstudie
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind-CSS
>
Welkom bij deze zelfstudie
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind-CSS
>
= 'tekst-2xl m-5 xl:tekst-wit tekst-center' >
Thema's
>
>
>
Stap 3: HTML-webpagina bekijken
Controleer ten slotte de uitvoer door de HTML-webpagina te bekijken:
Het kan worden waargenomen dat de inhoud van de webpagina verandert volgens de geconfigureerde schermen, kleuren en spatiëringseigenschappen.
Conclusie
De schermen key stelt gebruikers in staat om de responsieve breekpunten, de kleuren toets wordt gebruikt om het kleurenpalet voor het project aan te passen en de spatiëring toets wordt gebruikt om de afstand en maatschaal aan te passen. Bovendien kunnen gebruikers deze sleutels of eigenschappen aanpassen aan hun behoeften. Dit artikel heeft schermen, kleuren en spatiëring in het Tailwind-thema uitgelegd.