Tailwind CSS:ssä pehmuste on tila tietyn elementin sisällön ja sen reunan välillä. Vaakasuora pehmuste on tila elementin vasemmalla ja oikealla puolella, kun taas pystysuora pehmuste on tila elementin ylä- ja alaosassa. Tailwind tarjoaa useita hyödyllisyysluokkia vaaka- tai pystysuoran pehmusteen lisäämiseksi haluttuihin elementteihin.
Tämä artikkeli havainnollistaa:
Kuinka lisätä vaakasuuntaista pehmustetta myötätuuleen?
Vaakasuuntaisen täytön lisäämiseksi Tailwindin elementtiin käytetään luokkaa 'px-
Syntaksi
< elementti luokkaa = 'px-0...' > ... elementti >
Tässä 'px' edustaa 'x-akselia' tai 'vaakasuuntaista täyttöä'.
Esimerkki: Horisontaalisen täytön käyttäminen HTML-elementissä
Tässä esimerkissä käytämme ' px-20 ' hyötyluokka ' Jos haluat lisätä pystysuoran pehmusteen Tailwindin elementtiin, käytä ' py- Syntaksi Esimerkki: Pystytäytön käyttäminen HTML-elementtiin Tässä esimerkissä käytämme ' py-20 ' hyötyluokka ' Jos haluat lisätä vaaka- ja pystysuoran pehmusteen Tailwindissä, ' px-
< kehon >
< div luokkaa = 'bg-pink-600 px-20 w-max' >
Pehmuste sisään Tailwind CSS
div >
kehon >
Lähtö
Yllä oleva tulos näyttää säiliön vasemman ja oikean puolen pehmusteen. Tämä osoittaa, että vaakasuora pehmuste on lisätty säiliöelementtiin onnistuneesti. Kuinka lisätä pystysuora pehmuste Tailwindissä?
Tässä 'py' edustaa 'y-akselia' tai 'pystysuoraa täyttöä'.
< div luokkaa = 'bg-pink-600 py-20 w-max' >
Pehmuste sisään Tailwind CSS
div >
kehon >
Lähtö
Yllä oleva tulos näyttää säiliön ylä- ja alareunan pehmusteen. Tämä osoittaa, että pystysuora pehmuste on levitetty tehokkaasti säiliöelementtiin. Johtopäätös