Tailwind CSS:ssä täyttöä käytetään lisäämään tilaa tietyn elementin sisällön ja sen reunojen väliin. Se lisää ylimääräistä välilyöntiä elementin sisälle. Tailwind CSS tarjoaa joukon täyteapuohjelmia ja täytearvoja, joiden avulla käyttäjät voivat mukauttaa haluttujen elementtien väliä. Lisäksi käyttäjät voivat lisätä pehmusteen tietyn elementin yhdelle puolelle, kuten ylä-, ala-, vasemmalle tai oikealle.
Tämä blogi näyttää esimerkkejä täytetyksen lisäämisestä elementin yhdelle puolelle Tailwind CSS:ssä.
Kuinka lisätä pehmustetta yhdelle puolelle myötätuulessa?
Jos haluat lisätä pehmusteen Tailwind-elementin yhdelle puolelle, voidaan käyttää seuraavia hyödyllisyysluokkia:
Ymmärtääksesi sen paremmin, katso alla olevat esimerkit.
Esimerkki 1: Lisää täyte elementin yläosaan
Tässä esimerkissä käytämme ' pt-10 'hyötyluokka ' Esimerkki 2: Lisää täyte elementin alaosaan Tässä esimerkissä käytämme ' pb-10 'luokassa' Esimerkki 3: Lisää täyte elementin oikealle puolelle Tässä esimerkissä käytämme ' pr-10 'luokassa' Esimerkki 4: Lisää täyte elementin vasemmalle puolelle Tässä esimerkissä käytämme ' pl-10 'luokassa' Jos haluat lisätä pehmusteen Tailwindin elementin yhdelle puolelle, voidaan käyttää erilaisia hyödyllisyysluokkia, kuten ' pl-
< div luokkaa = 'bg-pink-600 pt-10 w-max' >
Pehmuste sisään Tailwind CSS
div >
kehon >
Lähtö
Yllä oleva tulos osoittaa, että pehmuste on lisätty säiliön yläosaan.
< div luokkaa = 'bg-pink-600 pb-10 w-max' >
Pehmuste sisään Tailwind CSS
div >
kehon >
Lähtö 
Voidaan nähdä, että säiliön pohjaan on lisätty pehmuste.
< div luokkaa = 'bg-pink-600 pr-10 w-max' >
Pehmuste sisään Tailwind CSS
div >
kehon >
Lähtö 
Yllä oleva tulos osoittaa, että täyte on lisätty säiliöelementin oikealle puolelle.
< div luokkaa = 'bg-pink-600 pl-10 w-max' >
Pehmuste sisään Tailwind CSS
div >
kehon >
Lähtö 
Voidaan havaita, että pehmuste on lisätty säiliön vasemmalle puolelle. Johtopäätös