Šiame straipsnyje bus paaiškinta:
- Ką ekranai, spalvos ir tarpai veikia „Tailwind“ temoje?
- Kaip naudoti ekranus, spalvas ir tarpus „Tailwind“ temoje?
- Kaip sukonfigūruoti ekranus, spalvas ir tarpus „Tailwind“ temoje?
Ką ekranai, spalvos ir tarpai veikia „Tailwind“ temoje?
The ekranai raktas leidžia vartotojams keisti „Tailwind“ projekto reaguojančius lūžio taškus. Lūžio taškai yra taškai, kuriuose išdėstymas keičiasi atsižvelgiant į ekrano plotį. Pagal numatytuosius nustatymus „Tailwind“ apima penkis ekranus, ty sm (mažas), md (vidutinis), lg (didelis) ir xl (ypač didelis). Tačiau vartotojai gali apibrėžti savo lūžio taškus naudodami „ekranų“ klavišą ir naudoti juos HTML programoje.
Spalvos klavišas naudojamas spalvų paletei keisti. Spalvos yra viena iš svarbiausių dizaino savybių. Tailwind tema suteikia numatytąją spalvų paletę su daugybe atspalvių, tačiau vartotojai taip pat gali ją tinkinti arba išplėsti savo spalvomis. Vartotojai gali apibrėžti spalvas naudodami klavišą „spalvos“, o tada naudoti jas su bet kokia su spalvomis susijusia naudingumo klasė HTML kode.
The tarpai klavišas naudojamas tarpų ir dydžio skalei keisti. Tarpai yra dar vienas esminis dizaino aspektas, nes jis turi įtakos elementų skaitomumui, išlygiavimui ir pusiausvyrai. Tailwind tema pateikia nuoseklią tarpų skalę, pagrįstą bazine 4 pikselių (0,25 rem) verte. Tačiau jį taip pat galima pritaikyti arba išplėsti pasirinktinėmis reikšmėmis. Vartotojai gali apibrėžti tarpų reikšmes naudodami klavišą „tarpai“, o tada naudoti jas su bet kokia su tarpais susijusia naudingumo klasė programos faile.
Kaip naudoti ekranus, spalvas ir tarpus „Tailwind“ temoje?
Norėdami naudoti ekranus, spalvas ir tarpus „Tailwind“ temoje, sukurkite HTML programą ir, jei reikia, naudokite numatytąjį ekraną, spalvas ir tarpų ypatybes. Tada paleiskite HTML programą ir peržiūrėkite HTML tinklalapį. Atlikime toliau nurodytus veiksmus:
1 veiksmas: sukurkite HTML tinklalapį
Pirmiausia sukurkite HTML programą ir naudokite numatytąsias ekrano, spalvų ir tarpų savybes:
= 'text-3xl m-5 sm:text-white text-center' >
Linux patarimas!
>
= 'text-2xl m-5 md:text-white text-center' >
Sveiki atvykę į šią mokymo programą
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
Sveiki atvykę į šią mokymo programą
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
= 'text-2xl m-5 xl:text-white text-center' >
Temos
>
>
>
Čia:
- “ -p-10 “ ir „ m-5 “ yra tarpo savybė.
- “ sm “, „ md “, „ lg “ ir „ xl “ yra ekrano savybės.
- “ raudona-700 “, „ mėlyna - 600 “, „ žalia - 500 “, „ rožinė - 700 “ ir „ baltas “ yra spalvos savybės.
2 veiksmas: paleiskite HTML programą
Tada paleiskite HTML programą, kad peržiūrėtumėte HTML tinklalapį:
Aukščiau pateiktame išvestyje galima pamatyti numatytuosius ekranus, spalvas ir tarpų savybes.
Kaip sukonfigūruoti ekranus, spalvas ir tarpus „Tailwind“ temoje?
Norėdami konfigūruoti ekranus, spalvas ir tarpus „Tailwind“ temoje, peržiūrėkite pateiktus veiksmus:
- Atidaryk ' tailwind.config.js “ failą.
- eikite į ' tema “ skyrių ir pagal poreikį tinkinkite ekranų, spalvų ir tarpų ypatybes.
- Naudokite tinkintas ypatybes HTML programoje.
- Peržiūrėkite HTML tinklalapį, kad patikrintumėte.
1 veiksmas: sukonfigūruokite ekranus, spalvas ir tarpus „Tailwind Config“ faile
Viduje ' tema “ skyriuje “ tailwind.config.js “ failą, tinkinkite ekranus, spalvas ir tarpų savybes pagal poreikį. Pavyzdžiui, šias savybes pritaikėme taip:
modulis .eksportas = {turinys : [ './index.html' ] ,
tema : {
//ekranų tinkinimas
ekranai : {
sm : „480 piks.“ ,
md : '668px' ,
lg : „876 piks.“ ,
xl : „1100 piks.“ ,
} ,
//spalvų tinkinimas
spalvos : {
baltas : #ffffff ,
juodas : „#000000“ ,
mėlyna : „#08609c“ ,
žalias : „#089c28“ ,
raudona : „#9c0306“ ,
geltona : „#ede60e“ ,
rožinis : „#ed0e55“ ,
} ,
//tarpų tinkinimas
tarpai : {
px : '1px' ,
'0' : '0' ,
'1' : '0,25 rem' ,
'2' : '0,5 rem' ,
'3' : '0,75 rem' ,
'4' : '1 dalykas' ,
'5' : '1.25 rem' ,
'6' : '1,5 rem' ,
'8' : '2rem' ,
'10' : '2,5 rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'dvidešimt' : '5rem' ,
}
} ,
} ;
Šiame kode:
- „ ekranai “ ypatybė apibrėžia įvairių dydžių ekrano lūžio taškus. Jame pateikiami slapyvardžiai (pvz., sm, md, lg, xl) ir jų lygiavertės reikšmės.
- „ spalvos “ ypatybė apibrėžia pasirinktines spalvas, naudodama jų pavadinimą ir šešioliktainės reikšmės poras.
- „ tarpai “ ypatybė nurodo pasirinktines daugelio dydžių tarpų vertes. Jis naudoja slapyvardžius (pvz., px, 0, 1, 2 ir tt), kad pateiktų konkrečias tarpų reikšmes „rem“ vienetais.
2 veiksmas: naudokite sukonfigūruotas ypatybes HTML programoje
Dabar naudokite tinkintas HTML programos savybes:
= 'text-3xl m-5 sm:text-white text-center' >
Linux patarimas!
>
= 'text-2xl m-5 md:text-white text-center' >
Sveiki atvykę į šią mokymo programą
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
Sveiki atvykę į šią mokymo programą
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
= 'text-2xl m-5 xl:text-white text-center' >
Temos
>
>
>
3 veiksmas: peržiūrėkite HTML tinklalapį
Galiausiai patikrinkite išvestį peržiūrėdami HTML tinklalapį:
Galima pastebėti, kad tinklalapio turinys keičiasi pagal sukonfigūruotus ekranus, spalvas ir tarpų savybes.
Išvada
The ekranai raktas leidžia vartotojams tinkinti / modifikuoti reaguojančius pertraukos taškus spalvos klavišas naudojamas projekto spalvų paletei tinkinti ir tarpai klavišas naudojamas tarpų ir dydžio skalei tinkinti. Be to, vartotojai gali tinkinti šiuos raktus ar ypatybes pagal savo poreikius. Šiame straipsnyje paaiškinti ekranai, spalvos ir tarpai pagal Tailwind temą.