Tento článok vysvetlí:
- Čo robia obrazovky, farby a medzery v téme Tailwind?
- Ako používať obrazovky, farby a medzery v téme Tailwind?
- Ako konfigurovať obrazovky, farby a medzery v téme Tailwind?
Čo robia obrazovky, farby a medzery v téme Tailwind?
The obrazovky kľúč umožňuje používateľom upraviť responzívne body prerušenia v projekte Tailwind. Body zlomu sú body, v ktorých sa rozloženie mení na základe šírky obrazovky. Tailwind predvolene obsahuje päť obrazoviek, t. j. sm (malé), md (stredné), lg (veľké) a xl (extra veľké). Používatelia však môžu definovať svoje body prerušenia pomocou klávesu „screens“ a potom ich použiť v programe HTML.
Farby kľúč sa používa na úpravu farebnej palety. Farby sú jednou z najdôležitejších vlastností dizajnu. Téma Tailwind poskytuje predvolenú paletu farieb so širokou škálou odtieňov, no používatelia si ju môžu tiež prispôsobiť alebo rozšíriť svojimi farbami. Používatelia môžu definovať farby pomocou klávesu „farby“ a potom ich použiť s akoukoľvek triedou pomocných nástrojov súvisiacich s farbami v kóde HTML.
The rozstup kľúč sa používa na úpravu mierky medzier a veľkosti. Rozstup je ďalším základným aspektom dizajnu, pretože ovplyvňuje čitateľnosť, zarovnanie a vyváženie prvkov. Motív Tailwind poskytuje konzistentnú mierku medzier na základe základnej hodnoty 4 pixely (0,25rem). Dá sa však aj prispôsobiť alebo rozšíriť o vlastné hodnoty. Používatelia môžu definovať hodnoty medzier pomocou kľúča „spacing“ a potom ich použiť s akoukoľvek pomocnou triedou súvisiacou s medzerami v programovom súbore.
Ako používať obrazovky, farby a medzery v téme Tailwind?
Ak chcete použiť obrazovky, farby a medzery v téme Tailwind, vytvorte program HTML a podľa potreby použite predvolené vlastnosti obrazovky, farieb a medzier. Potom spustite program HTML a zobrazte webovú stránku HTML. Postupujme podľa nižšie uvedených krokov:
Krok 1: Vytvorte webovú stránku HTML
Najprv vytvorte program HTML a použite predvolené vlastnosti obrazovky, farieb a medzier:
= 'text-3xl m-5 sm:text-biely text-stred' >
Tip pre Linux!
>
= 'text-2xl m-5 md:text-biely text-stred' >
Vitajte v tomto návode
>
= 'text-2xl m-5 lg:text-biely text-stred' >
Tailwind CSS
>
Vitajte v tomto návode
>
= 'text-2xl m-5 lg:text-biely text-stred' >
Tailwind CSS
>
= 'text-2xl m-5 xl:text-biely text-stred' >
Témy
>
>
>
Tu:
- “ -p-10 “ a „ m-5 “ sú vlastnosťou medzery.
- “ sm “, “ md “, “ lg “ a „ xl “ sú vlastnosti obrazovky.
- “ červená - 700 “, “ modrá - 600 “, “ zelená - 500 “, “ ružová-700 “ a „ biely “ sú vlastnosti farieb.
Krok 2: Spustite program HTML
Potom spustite program HTML na zobrazenie webovej stránky HTML:
Vo vyššie uvedenom výstupe je možné vidieť predvolené obrazovky, farby a vlastnosti medzier.
Ako konfigurovať obrazovky, farby a medzery v téme Tailwind?
Ak chcete nakonfigurovať obrazovky, farby a medzery v téme Tailwind, pozrite si uvedené kroky:
- Otvor ' tailwind.config.js “.
- Prejdite na „ tému ” a prispôsobte si obrazovky, farby a vlastnosti medzier podľa potreby.
- Použite prispôsobené vlastnosti v programe HTML.
- Pozrite si webovú stránku HTML na overenie.
Krok 1: Nakonfigurujte obrazovky, farby a medzery v konfiguračnom súbore Tailwind
V ' tému “ sekcia “ tailwind.config.js ” prispôsobte obrazovky, farby a vlastnosti medzier podľa potreby. Tieto vlastnosti sme prispôsobili napríklad takto:
modul .exportuje = {obsahu : [ './index.html' ] ,
tému : {
//prispôsobenie obrazoviek
obrazovky : {
sm : '480px' ,
md : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//prispôsobenie farieb
farby : {
biely : #ffffff ,
čierna : '#000000' ,
Modrá : '#08609c' ,
zelená : '#089c28' ,
červená : '#9c0306' ,
žltá : '#ede60e' ,
Ružová : '#ed0e55' ,
} ,
//prispôsobenie medzier
rozstup : {
px : '1px' ,
'0' : '0' ,
'1' : '0.25rem' ,
'2' : '0.5rem' ,
'3' : '0,75rem' ,
'4' : '1 vec' ,
'5' : '1.25rem' ,
'6' : '1.5rem' ,
'8' : '2rem' ,
'10' : '2.5rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'dvadsať' : '5rem' ,
}
} ,
} ;
V tomto kóde:
- ' obrazovky Vlastnosť ” definuje body prerušenia obrazovky pre rôzne veľkosti. Poskytuje aliasy (ako sm, md, lg, xl) a ich ekvivalentné hodnoty.
- ' farby Vlastnosť ” definuje vlastné farby pomocou ich názvov a párov hexadecimálnych hodnôt.
- ' rozstup vlastnosť určuje vlastné hodnoty medzier pre mnoho veľkostí. Používa aliasy (napríklad px, 0, 1, 2 atď.) na vyjadrenie konkrétnych hodnôt medzier v jednotkách „rem“.
Krok 2: Použite Konfigurované vlastnosti v programe HTML
Teraz použite prispôsobené vlastnosti v programe HTML:
= 'text-3xl m-5 sm:text-biely text-stred' >
Tip pre Linux!
>
= 'text-2xl m-5 md:text-biely text-stred' >
Vitajte v tomto návode
>
= 'text-2xl m-5 lg:text-biely text-stred' >
Tailwind CSS
>
Vitajte v tomto návode
>
= 'text-2xl m-5 lg:text-biely text-stred' >
Tailwind CSS
>
= 'text-2xl m-5 xl:text-biely text-stred' >
Témy
>
>
>
Krok 3: Zobrazte webovú stránku HTML
Nakoniec overte výstup zobrazením webovej stránky HTML:
Je možné pozorovať, že obsah webovej stránky sa mení podľa nakonfigurovaných obrazoviek, farieb a vlastností medzier.
Záver
The obrazovky kľúč umožňuje používateľom prispôsobiť/upraviť responzívne prerušovacie body, farby kľúč sa používa na prispôsobenie palety farieb pre projekt a rozostup kľúč sa používa na prispôsobenie mierky rozstupov a veľkostí. Používatelia si navyše môžu tieto kľúče alebo vlastnosti prispôsobiť podľa svojich potrieb. V tomto článku sú vysvetlené obrazovky, farby a medzery v motíve Tailwind.