Kaip pridėti paminkštinimus į visas „Tailwind“ puses?

Kaip Prideti Paminkstinimus I Visas Tailwind Puses



Tailwind CSS yra gerai žinoma sistema, kuri naudojama kuriant tinkinamus ir reaguojančius tinklalapius ar dizainą. Tai taip pat leidžia vartotojams valdyti elementų išdėstymą ir tarpus nerašant jokio pasirinktinio CSS. Padding – tai tarpas tarp konkretaus elemento turinio ir jo kraštinės. Kartais vartotojai nori pritaikyti tą patį užpildymo kiekį kiekvienai elemento pusei. Tailwind pateikia naudingumo klases, skirtas pritaikyti užpildymą visoms elemento pusėms arba konkrečioms pusėms, pvz., viršuje, dešinėje, apačioje arba kairėje.

Šiame straipsnyje bus parodytas būdas pridėti užpildymo visose „Tailwind“ elemento pusėse.





Kaip pridėti paminkštinimus prie visų pusių „Tailwind“?

Norėdami pridėti užpildymą visose tam tikro elemento „Tailwind“ pusėse, sukurkite HTML struktūrą. Tada naudokite „p-“ naudingumo klasę su konkrečiu elementu. Būtina nurodyti norimą reikšmę, kad elementui būtų pritaikytas užpildymas. Tada patikrinkite HTML tinklalapį, kad įsitikintumėte, jog yra pakeitimų.



Sintaksė



< elementas klasė = 'p-' ... elementas >


Pakeiskite „“ bet kokiu norimu skaičiumi, pvz., 2, 4, 12, 20 ir kt.





Pavyzdys

Šiame pavyzdyje turime du '

“ elementus ir pritaikysime du skirtingus paminkštinimus, t. p-8 “ ir „ p-14 ' ant jų:



< kūnas >

< div klasė = 'bg-pink-600 p-8 w-max' >
Paminkštinimas in Tailwind CSS
div >

< br >

< div klasė = 'bg-teal-600 p-14 w-max' >
Paminkštinimas in Tailwind CSS
div >

kūnas >


Čia, pirmame

:

    • bg-rožinė-600 ” klasė nustato rožinę spalvą
      elemento fone.
    • p-8 “ klasė prideda 8 vienetus paminkštinimo prie visų konteinerio pusių.
    • w-maks ” klasė nustato
      elemento plotį iki didžiausio turinio pločio.

Antrame

:

    • bg-teal-600 ” klasė nustato melsvą spalvą į elemento
      foną.
    • p-14 ” klasė taiko 14 vienetų paminkštinimo į visas konteinerio puses.
    • w-maks ” klasė nustato
      elemento plotį iki didžiausio turinio pločio.

Išvestis


Pagal aukščiau pateiktą išvestį nurodytas paminkštinimas buvo pritaikytas visose abiejų konteinerių pusėse.

Išvada

Norint pridėti užpildymą visose „Tailwind“ elemento pusėse, „p-“ naudingumo klasė naudojama su norimu elementu HTML programoje. Vartotojai turi nurodyti konkrečią reikšmę, kad elementui pritaikytų užpildymą. Norėdami patikrinti, peržiūrėkite HTML tinklalapį ir įsitikinkite, kad yra atlikti pakeitimai. Šiame straipsnyje parodytas būdas pridėti užpildymo visose „Tailwind“ elemento pusėse.