Kuinka lisätä pehmusteita kaikille sivuille Tailwindissä?

Kuinka Lisata Pehmusteita Kaikille Sivuille Tailwindissa



Tailwind CSS on hyvin tunnettu kehys, jota käytetään muokattavien ja reagoivien verkkosivujen tai ulkoasujen luomiseen. Sen avulla käyttäjät voivat myös hallita elementtien asettelua ja välilyöntejä kirjoittamatta mukautettua CSS:ää. Täyte on tila tietyn elementin sisällön ja sen reunuksen välillä. Joskus käyttäjät haluavat lisätä saman määrän täytettä elementin joka puolelle. Tailwind tarjoaa hyödyllisyysluokkia, joiden avulla voidaan lisätä pehmusteita elementin kaikille sivuille tai tietyille sivuille, kuten ylä-, oikea-, ala- tai vasemmalle.

Tässä artikkelissa on esimerkki tapa lisätä pehmuste Tailwind-elementin kaikille sivuille.





Kuinka lisätä pehmusteita kaikille sivuille Tailwindissä?

Jos haluat lisätä täyttöä Tailwindin tietyn elementin kaikille puolille, luo HTML-rakenne. Käytä sitten 'p- ' -apuluokkaa tietyn elementin kanssa. On määritettävä haluttu arvo, jotta elementtiin voidaan lisätä täyte. Tarkista seuraavaksi HTML-verkkosivu varmistaaksesi muutokset.



Syntaksi



< elementti luokkaa = 'p- ' ... elementti >


Korvaa ' ' millä tahansa halutulla numerolla, kuten 2, 4, 12, 20 jne.



Esimerkki

Tässä esimerkissä meillä on kaksi '

' elementtejä ja käytämme kahta eri pehmustetta eli ' p-8 ' ja ' p-14 ' niissä:



< kehon >

< div luokkaa = 'bg-pink-600 p-8 w-max' >
Pehmuste sisään Tailwind CSS
div >

< br >

< div luokkaa = 'bg-teal-600 p-14 w-max' >
Pehmuste sisään Tailwind CSS
div >

kehon >


Tässä ensimmäisessä

:

    • ' bg-pink-600 ” luokka asettaa vaaleanpunaisen värin
      -elementin taustalle.
    • ' p-8 ”-luokka lisää 8 yksikköä pehmustetta säiliön kaikille sivuille.
    • ' w-max ” luokka asettaa
      -elementin leveyden sen enimmäissisältöleveyteen.

Toisessa

:

    • ' bg-teal-600 ” luokka asettaa sinivihreän värin
      -elementin taustalle.
    • ' p-14 ” luokka käyttää 14 yksikköä pehmustetta kontin jokaiselle sivulle.
    • ' w-max ” luokka asettaa
      -elementin leveyden sen enimmäissisältöleveyteen.

Lähtö


Yllä olevan tulosteen mukaan määritetty pehmuste on levitetty molempien säiliöiden kaikille sivuille.

Johtopäätös

Jos haluat lisätä täyttöä Tailwind-elementin kaikille puolille, käytetään 'p- ' -apuluokkaa halutun elementin kanssa HTML-ohjelmassa. Käyttäjien on määritettävä tietty arvo voidakseen lisätä elementtiin täyttöä. Tarkista HTML-verkkosivu ja varmista muutokset. Tämä artikkeli on esimerkki menetelmästä lisätä pehmuste Tailwind-elementin kaikille sivuille.

Muut

Luokka

Suosittu Viestiä

Oracle Luo Temp Table

Merkkijonon palauttaminen C-funktiosta

Littlest JupyterHubin (TLJH) asentaminen Debain 11/12- ja Ubuntu 20.04 LTS/22.04 LTS -versioihin

Mikä on AWS GuardDuty ja miksi sitä käytetään?

Tuotetunnusten löytäminen Minecraft Java Editionista - Perusopas

Kuinka allokoida vaarallisia puskureita Buffer.allocUnsafe():lla Node.js:ssa?

Automorfisten numeroiden tarkistaminen Javassa

Opas tekstin muotoiluun Tailwind CSS:n avulla

Kuinka asettaa No Limit -kutsu Discord-palvelimelle?

Kuinka saada kuorohedelmiä Minecraftissa

Kuinka luoda hakemisto tai kansio Windowsissa

20 turvallisuusvinkkiä Raspberry Pi:lle

Avaa tiedosto -valintaikkunan käyttäminen C#-sovelluksissa

Mikä on Int64.MaxValue-kenttä (pitkä maksimiarvo) C#:ssa

Luku 4: 6502 Microprocessor Assembly Language -opetusohjelma

Kuinka tehdä verkon nopeustesti tarkasti Androidilla

Viivakuvaajan luominen virhepalkeilla MATLABissa käyttämällä errorbar()

Hash-taulukko C++:ssa

Kuinka poistaa hakukone Chromessa

Mikä on scrollLeft()-menetelmä jQueryssa