Tento článek vysvětlí:
- Co dělají obrazovky, barvy a mezery v motivu Tailwind?
- Jak používat obrazovky, barvy a mezery v motivu Tailwind?
- Jak nakonfigurovat obrazovky, barvy a mezery v motivu Tailwind?
Co dělají obrazovky, barvy a mezery v motivu Tailwind?
The obrazovky klíč umožňuje uživatelům upravovat responzivní zarážky v projektu Tailwind. Body přerušení jsou body, kde se rozvržení mění na základě šířky obrazovky. Tailwind ve výchozím nastavení obsahuje pět obrazovek, tj. sm (malá), md (střední), lg (velká) a xl (extra velká). Uživatelé však mohou definovat své body přerušení pomocí klávesy „screens“ a poté je použít v programu HTML.
Barvy klíč se používá k úpravě palety barev. Barvy jsou jednou z nejdůležitějších vlastností designu. Motiv Tailwind poskytuje výchozí paletu barev se širokou škálou odstínů, ale uživatelé si ji mohou také přizpůsobit nebo rozšířit svými barvami. Uživatelé mohou definovat barvy pomocí klíče „colors“ a poté je použít s jakoukoli třídou pomocných nástrojů souvisejících s barvami v kódu HTML.
The vzdálenost klíč se používá k úpravě měřítka vzdálenosti a velikosti. Rozestupy jsou dalším zásadním aspektem návrhu, protože ovlivňují čitelnost, zarovnání a vyvážení prvků. Motiv Tailwind poskytuje konzistentní měřítko vzdálenosti založené na základní hodnotě 4 pixelů (0,25rem). Lze jej však také přizpůsobit nebo rozšířit o vlastní hodnoty. Uživatelé mohou definovat hodnoty mezer pomocí klíče „spacing“ a poté je použít s jakoukoli obslužnou třídou související s mezerami v souboru programu.
Jak používat obrazovky, barvy a mezery v motivu Tailwind?
Chcete-li v motivu Tailwind použít obrazovky, barvy a mezery, vytvořte program HTML a podle potřeby použijte výchozí vlastnosti obrazovky, barev a mezer. Poté spusťte program HTML a zobrazte webovou stránku HTML. Postupujme podle níže uvedených kroků:
Krok 1: Vytvořte webovou stránku HTML
Nejprve vytvořte HTML program a použijte výchozí vlastnosti obrazovky, barev a mezer:
= 'text-3xl m-5 sm:text-white text-center' >
Linux Tip!
>
= 'text-2xl m-5 md:text-white text-center' >
Vítejte v tomto tutoriálu
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
Vítejte v tomto tutoriálu
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
= 'text-2xl m-5 xl:text-white text-center' >
Témata
>
>
>
Tady:
- “ -p-10 ' a ' m-5 “ jsou vlastnost mezer.
- “ sm “, “ md “, “ lg ', a ' xl “ jsou vlastnosti obrazovky.
- “ červená - 700 “, “ modrá - 600 “, “ zelená - 500 “, “ růžová-700 ', a ' bílý “ jsou vlastnosti barev.
Krok 2: Spusťte program HTML
Poté spusťte program HTML a zobrazte webovou stránku HTML:
Ve výše uvedeném výstupu lze vidět výchozí obrazovky, barvy a vlastnosti mezer.
Jak nakonfigurovat obrazovky, barvy a mezery v motivu Tailwind?
Chcete-li nakonfigurovat obrazovky, barvy a mezery v motivu Tailwind, podívejte se na uvedené kroky:
- Otevři ' tailwind.config.js “.
- Přejděte na „ téma ” a podle potřeby upravte vlastnosti obrazovek, barev a mezer.
- Použijte přizpůsobené vlastnosti v programu HTML.
- Pro ověření si prohlédněte webovou stránku HTML.
Krok 1: Nakonfigurujte obrazovky, barvy a mezery v konfiguračním souboru Tailwind
V ' téma 'část ' tailwind.config.js ” upravte obrazovky, barvy a vlastnosti mezer podle potřeby. Tyto vlastnosti jsme například upravili takto:
modul .exportuje = {obsah : [ './index.html' ] ,
téma : {
//přizpůsobení obrazovek
obrazovky : {
sm : '480px' ,
md : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//přizpůsobení barev
barvy : {
bílý : #ffffff ,
Černá : '#000000' ,
modrý : '#08609c' ,
zelená : '#089c28' ,
Červené : '#9c0306' ,
žlutá : '#ede60e' ,
růžový : '#ed0e55' ,
} ,
//přizpůsobení mezer
vzdálenost : {
px : '1px' ,
'0' : '0' ,
'1' : '0,25rem' ,
'2' : '0.5rem' ,
'3' : '0,75rem' ,
'4' : '1 věc' ,
'5' : '1,25rem' ,
'6' : '1.5rem' ,
'8' : '2rem' ,
'10' : '2.5rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'dvacet' : '5rem' ,
}
} ,
} ;
V tomto kódu:
- ' obrazovky Vlastnost ” definuje zarážky obrazovky pro různé velikosti. Poskytuje aliasy (jako sm, md, lg, xl) a jejich ekvivalentní hodnoty.
- ' barvy Vlastnost ” definuje vlastní barvy pomocí jejich názvu a dvojice hexadecimálních hodnot.
- ' vzdálenost Vlastnost ” určuje vlastní hodnoty mezer pro mnoho velikostí. Používá aliasy (jako jsou px, 0, 1, 2 atd.) k reprezentaci konkrétních hodnot mezer v jednotkách „rem“.
Krok 2: Použijte Konfigurované vlastnosti v programu HTML
Nyní použijte přizpůsobené vlastnosti v programu HTML:
= 'text-3xl m-5 sm:text-white text-center' >
Linux Tip!
>
= 'text-2xl m-5 md:text-white text-center' >
Vítejte v tomto tutoriálu
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
Vítejte v tomto tutoriálu
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
= 'text-2xl m-5 xl:text-white text-center' >
Témata
>
>
>
Krok 3: Zobrazte webovou stránku HTML
Nakonec ověřte výstup zobrazením webové stránky HTML:
Lze pozorovat, že obsah webové stránky se mění podle nakonfigurovaných obrazovek, barev a vlastností mezer.
Závěr
The obrazovky klíč umožňuje uživatelům přizpůsobit/upravit responzivní zarážky, the barvy klíč se používá k přizpůsobení palety barev pro projekt a vzdálenost klíč se používá k přizpůsobení měřítka vzdálenosti a velikosti. Uživatelé si navíc mohou tyto klíče nebo vlastnosti přizpůsobit podle svých potřeb. Tento článek vysvětluje obrazovky, barvy a mezery v motivu Tailwind.