See artikkel selgitab:
- Mida teevad ekraanid, värvid ja vahed Tailwindi teemas?
- Kuidas kasutada Tailwindi teemas ekraane, värve ja vahesid?
- Kuidas Tailwindi teemas ekraane, värve ja vahesid konfigureerida?
Mida teevad ekraanid, värvid ja vahed Tailwindi teemas?
The ekraanid võti võimaldab kasutajatel muuta Tailwindi projekti reageerivaid katkestuspunkte. Katkestuspunktid on punktid, kus paigutus muutub sõltuvalt ekraani laiusest. Vaikimisi sisaldab Tailwind viit ekraani, st sm (väike), md (keskmine), lg (suur) ja xl (eriti suur). Siiski saavad kasutajad määrata oma katkestuspunktid klahvi 'ekraanid' abil ja seejärel kasutada neid HTML-programmis.
Värvid klahvi kasutatakse värvipaleti muutmiseks. Värvid on disaini üks olulisemaid omadusi. Tailwindi teema pakub laia varjundivalikuga vaikevärvipaletti, kuid kasutajad saavad seda ka kohandada või oma värvidega laiendada. Kasutajad saavad värvide klahvi abil määratleda värve ja seejärel kasutada neid HTML-koodi mis tahes värviga seotud utiliidiklassiga.
The vahekaugus klahvi kasutatakse vahekauguse ja suuruse skaala muutmiseks. Vahekaugus on disaini teine oluline aspekt, kuna see mõjutab elementide loetavust, joondamist ja tasakaalu. Tailwindi teema pakub ühtset vaheskaala, mis põhineb baasväärtusel 4 pikslit (0,25 rem). Kuid seda saab ka kohandada või kohandatud väärtustega laiendada. Kasutajad saavad määrata vaheväärtused klahvi „Spacing” abil ja seejärel kasutada neid programmifaili mis tahes vahekaugusega seotud utiliidiklassiga.
Kuidas kasutada Tailwindi teemas ekraane, värve ja vahesid?
Ekraanide, värvide ja vahede kasutamiseks Tailwindi teemas looge HTML-programm ja kasutage vastavalt vajadusele vaikeekraani, värve ja vahekaugusi. Seejärel käivitage HTML-programm ja vaadake HTML-i veebilehte. Järgime alltoodud samme:
1. samm: looge HTML-i veebileht
Esmalt looge HTML-programm ja kasutage vaikeekraani, värve ja vahekaugusi:
= 'tekst-3xl m-5 sm:tekst-valge tekstikeskus' >
Linuxi vihje!
>
= 'tekst-2xl m-5 md:tekst-valge tekstikeskus' >
Tere tulemast sellesse juhendisse
>
= 'tekst-2xl m-5 lg:tekst-valge tekstikeskus' >
Tailtuule CSS
>
Tere tulemast sellesse juhendisse
>
= 'tekst-2xl m-5 lg:tekst-valge tekstikeskus' >
Tailtuule CSS
>
= 'tekst-2xl m-5 xl:tekst-valge tekstikeskus' >
Teemad
>
>
>
Siin:
- “ -p-10 ” ja „ m-5 ” on vaheomadused.
- “ sm ”, “ md ”, “ lg ”, ja „ xl ” on ekraani omadused.
- “ punane - 700 ”, “ sinine - 600 ”, “ roheline - 500 ”, “ roosa - 700 ”, ja „ valge ” on värviomadused.
2. samm: käivitage HTML-programm
Seejärel käivitage HTML-i veebilehe vaatamiseks HTML-programm:
Ülaltoodud väljundis on näha vaikeekraanid, värvid ja vaheomadused.
Kuidas Tailwindi teemas ekraane, värve ja vahesid konfigureerida?
Ekraanide, värvide ja vahede konfigureerimiseks Tailwindi teemas vaadake etteantud samme.
- Ava ' tailwind.config.js ” faili.
- minge jaotisse ' teema ” jaotist ja kohandage vastavalt vajadusele ekraane, värve ja vahekaugusi.
- Kasutage HTML-programmi kohandatud atribuute.
- Kontrollimiseks vaadake HTML-i veebilehte.
1. samm: konfigureerige Tailwindi konfiguratsioonifailis ekraanid, värvid ja vahed
jaotises ' teema jaotise ' tailwind.config.js ” faili, kohandage vastavalt vajadusele ekraane, värve ja vahekaugusi. Näiteks oleme neid atribuute kohandanud järgmiselt.
moodul .eksport = {sisu : [ './index.html' ] ,
teema : {
//ekraanide kohandamine
ekraanid : {
sm : '480 pikslit' ,
md : '668px' ,
lg : '876 pikslit' ,
xl : '1100px' ,
} ,
//värvide kohandamine
värvid : {
valge : #ffffff ,
must : '#000000' ,
sinine : '#08609c' ,
roheline : '#089c28' ,
punane : '#9c0306' ,
kollane : '#ede60e' ,
roosa : '# ed0e55' ,
} ,
//vahekoha kohandamine
vahekaugus : {
px : '1px' ,
'0' : '0' ,
'1' : '0,25 rem' ,
'2' : '0,5 rem' ,
'3' : '0,75 rem' ,
'4' : '1 asi' ,
'5' : '1,25 rem' ,
'6' : '1,5 rem' ,
'8' : '2rem' ,
'10' : '2,5 rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'kakskümmend' : '5rem' ,
}
} ,
} ;
Selles koodis:
- ' ekraanid ” atribuut määrab ekraani katkestuspunktid erinevate suuruste jaoks. See pakub varjunimesid (nt sm, md, lg, xl) ja nende samaväärseid väärtusi.
- ' värvid ” atribuut määrab kohandatud värvid, kasutades nende nime ja kuueteistkümnendsüsteemi väärtuste paare.
- ' vahekaugus ” atribuut määrab paljude suuruste jaoks kohandatud vaheväärtused. See kasutab varjunimesid (nt px, 0, 1, 2 jne), et esitada konkreetseid vaheväärtusi “rem” ühikutes.
2. samm: kasutage HTML-programmis konfigureeritud atribuute
Nüüd kasutage HTML-programmi kohandatud atribuute:
= 'tekst-3xl m-5 sm:tekst-valge tekstikeskus' >
Linuxi vihje!
>
= 'tekst-2xl m-5 md:tekst-valge tekstikeskus' >
Tere tulemast sellesse juhendisse
>
= 'tekst-2xl m-5 lg:tekst-valge tekstikeskus' >
Tailtuule CSS
>
Tere tulemast sellesse juhendisse
>
= 'tekst-2xl m-5 lg:tekst-valge tekstikeskus' >
Tailtuule CSS
>
= 'tekst-2xl m-5 xl:tekst-valge tekstikeskus' >
Teemad
>
>
>
3. samm: vaadake HTML-i veebilehte
Lõpuks kontrollige väljundit, vaadates HTML-i veebilehte:
Võib täheldada, et veebilehe sisu muutub vastavalt seadistatud ekraanidele, värvidele ja vaheomadustele.
Järeldus
The ekraanid võti võimaldab kasutajatel kohandada/muuta reageerivaid katkestuspunkte värvid klahvi kasutatakse projekti värvipaleti kohandamiseks ja vahekaugus klahvi kasutatakse vahekauguse ja suuruse skaala kohandamiseks. Lisaks saavad kasutajad neid võtmeid või atribuute vastavalt oma vajadustele kohandada. Selles artiklis on selgitatud Tailwindi teema ekraane, värve ja vahesid.