Šajā rakstā tiks paskaidrots:
- Ko Tailwind motīvā dara ekrāni, krāsas un atstarpes?
- Kā Tailwind motīvā izmantot ekrānus, krāsas un atstarpes?
- Kā Tailwind motīvā konfigurēt ekrānus, krāsas un atstarpes?
Ko Tailwind motīvā dara ekrāni, krāsas un atstarpes?
The ekrāni atslēga ļauj lietotājiem modificēt Tailwind projekta atsaucīgos pārtraukumpunktus. Pārtraukuma punkti ir punkti, kuros izkārtojums mainās atkarībā no ekrāna platuma. Pēc noklusējuma Tailwind ietver piecus ekrānus, t.i., sm (mazs), md (vidējs), lg (liels) un xl (īpaši liels). Tomēr lietotāji var definēt savus pārtraukuma punktus, izmantojot taustiņu “ekrāni”, un pēc tam izmantot tos HTML programmā.
Krāsas taustiņu izmanto, lai mainītu krāsu paleti. Krāsas ir viena no galvenajām dizaina iezīmēm. Tailwind motīvs nodrošina noklusējuma krāsu paleti ar plašu toņu klāstu, taču lietotāji to var arī pielāgot vai paplašināt ar savām krāsām. Lietotāji var definēt krāsas, izmantojot taustiņu “krāsas”, un pēc tam izmantot tās ar jebkuru ar krāsu saistītu lietderības klasi HTML kodā.
The atstarpes taustiņu izmanto, lai mainītu atstarpi un izmēru skalu. Atstarpes ir vēl viens būtisks dizaina aspekts, jo tas ietekmē elementu lasāmību, izlīdzināšanu un līdzsvaru. Tailwind motīvs nodrošina konsekventu atstarpes skalu, kuras pamatā ir 4 pikseļu (0,25 rem) bāzes vērtība. Tomēr to var arī pielāgot vai paplašināt ar pielāgotām vērtībām. Lietotāji var definēt atstarpes vērtības, izmantojot taustiņu “atstarpes”, un pēc tam izmantot tās ar jebkuru ar atstarpēm saistīto utilītu klasi programmas failā.
Kā Tailwind motīvā izmantot ekrānus, krāsas un atstarpes?
Lai motīvā Tailwind izmantotu ekrānus, krāsas un atstarpes, izveidojiet HTML programmu un pēc vajadzības izmantojiet noklusējuma ekrānu, krāsas un atstarpes. Pēc tam palaidiet HTML programmu un skatiet HTML tīmekļa lapu. Ļaujiet mums veikt tālāk minētās darbības:
1. darbība. Izveidojiet HTML tīmekļa lapu
Vispirms izveidojiet HTML programmu un izmantojiet noklusējuma ekrāna, krāsas un atstarpes rekvizītus:
<ķermenis > = 'text-3xl m-5 sm:text-white text-center' >
Linux padoms!
>
= 'text-2xl m-5 md:text-white text-center' >
Laipni lūdzam šajā apmācībā
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
Laipni lūdzam šajā apmācībā
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
= 'text-2xl m-5 xl:text-white text-center' >
Tēmas
>
>
>
Šeit:
- ' -p-10 ' un ' m-5 ” ir atstarpes īpašums.
- ' sm ”, “ md ”, “ lg ', un ' xl ” ir ekrāna rekvizīti.
- ' sarkans-700 ”, “ zils-600 ”, “ zaļš-500 ”, “ rozā-700 ', un ' balts ” ir krāsu īpašības.
2. darbība: palaidiet HTML programmu
Pēc tam palaidiet HTML programmu, lai skatītu HTML tīmekļa lapu:
Iepriekš minētajā izvadē var redzēt noklusējuma ekrānus, krāsas un atstarpes īpašības.
Kā Tailwind motīvā konfigurēt ekrānus, krāsas un atstarpes?
Lai konfigurētu ekrānus, krāsas un atstarpes Tailwind motīvā, skatiet tālāk norādītās darbības.
- Atveriet ' tailwind.config.js ” failu.
- dodieties uz ' tēma ” sadaļu un pēc vajadzības pielāgojiet ekrānus, krāsas un atstarpes.
- Izmantojiet pielāgotos rekvizītus HTML programmā.
- Apskatiet HTML tīmekļa lapu verifikācijai.
1. darbība: konfigurējiet ekrānus, krāsas un atstarpes Tailwind konfigurācijas failā
Iekš ' tēma sadaļas ' tailwind.config.js ” failu, pielāgojiet ekrānus, krāsas un atstarpes īpašības atbilstoši vajadzībām. Piemēram, mēs esam pielāgojuši šos rekvizītus šādi:
modulis .eksports = {saturu : [ './index.html' ] ,
tēma : {
//ekrānu pielāgošana
ekrāni : {
sm : '480 pikseļi' ,
md : '668 pikseļi' ,
lg : '876 pikseļi' ,
xl : '1100 pikseļi' ,
} ,
//krāsu pielāgošana
krāsas : {
balts : #ffffff ,
melns : '#000000' ,
zils : '#08609c' ,
zaļš : '#089c28' ,
sarkans : '#9c0306' ,
dzeltens : '#ede60e' ,
rozā : '#ed0e55' ,
} ,
//pielāgot atstarpi
atstarpes : {
px : '1px' ,
'0' : '0' ,
'1' : '0,25 rem' ,
'2' : “0,5 rem” ,
'3' : '0,75 rem' ,
'4' : '1 lieta' ,
'5' : '1,25 rem' ,
'6' : '1,5 rem' ,
'8' : '2rem' ,
'10' : '2,5 rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'divdesmit' : '5rem' ,
}
} ,
} ;
Šajā kodā:
- ' ekrāni Īpašums definē ekrāna pārtraukuma punktus dažādiem izmēriem. Tas nodrošina aizstājvārdus (piemēram, sm, md, lg, xl) un to ekvivalentās vērtības.
- ' krāsas ” īpašums definē pielāgotas krāsas, izmantojot to nosaukumu un heksadecimālo vērtību pārus.
- ' atstarpes ” rekvizīts norāda pielāgotas atstarpes vērtības daudziem izmēriem. Tas izmanto aizstājvārdus (piemēram, px, 0, 1, 2 utt.), lai attēlotu noteiktas atstarpes vērtības “rem” vienībās.
2. darbība: izmantojiet HTML programmas konfigurētos rekvizītus
Tagad izmantojiet pielāgotos rekvizītus HTML programmā:
<ķermenis > = 'text-3xl m-5 sm:text-white text-center' >
Linux padoms!
>
= 'text-2xl m-5 md:text-white text-center' >
Laipni lūdzam šajā apmācībā
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
Laipni lūdzam šajā apmācībā
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
= 'text-2xl m-5 xl:text-white text-center' >
Tēmas
>
>
>
3. darbība: skatiet HTML tīmekļa lapu
Visbeidzot pārbaudiet izvadi, apskatot HTML tīmekļa lapu:
Var novērot, ka tīmekļa lapas saturs mainās atbilstoši konfigurētajiem ekrāniem, krāsām un atstarpju īpašībām.
Secinājums
The ekrāni atslēga ļauj lietotājiem pielāgot/modificēt atsaucīgos pārtraukumpunktus, krāsas taustiņu izmanto, lai pielāgotu krāsu paleti projektam un atstarpes taustiņš tiek izmantots, lai pielāgotu atstarpi un izmēru skalu. Turklāt lietotāji var pielāgot šīs atslēgas vai rekvizītus atbilstoši savām vajadzībām. Šajā rakstā ir izskaidroti ekrāni, krāsas un atstarpes Tailwind motīvā.