Tailwind CSS Simple Padding Example

In tailwind css padding class is much easier than bootstrap. We can control the padding on one side of an element using the `p{t|r|b|l}-{size}` and `p{x|y}-{size}` utilities.




Padding all side (p)

.p class property for setting all the padding properties all side `p-{size}`

<div class="bg-red-500 p-4 text-red-100">Padding All Side</div>


Padding top (pt)

.pt class property for setting top padding  `pt-{size}`

<div class="bg-red-500 pt-4 text-red-100">Padding top</div>


Padding bottom (pb)

.pb class property for setting bottom padding  `pb-{size}`

<div class="bg-red-500 pb-4 text-red-100">Padding bottom</div>


Padding left (pl)

.pb class property for setting left padding  `pl-{size}`

<div class="bg-red-500 pl-4 text-red-100">Padding left</div>


Padding bottom (pr)

.pb class property for setting right padding  `pr-{size}`

<div class="bg-red-500 pr-4 text-red-100">Padding right</div>


Padding vertical  (py)

.py class property for setting top and bottom padding  `py-{size}`

<div class="bg-red-500 py-4 text-red-100 rounded">Padding top & bottom</div>


Padding  horizontal  (px)

.px class property for setting left and right padding  `px-{size}`

<div class="bg-red-500 px-4 text-red-100 rounded">Padding left & right</div>




Padding For Tailwind CSS 2.2 JIT Mode or Tailwind CSS 3.0

Padding using Jit Mode (p-[size px])

<div class="p-[416px] bg-gray-400">padding jit mode</div>

Padding using Jit Mode (p-[size rem])

<div class="p-[26rem] bg-gray-400">padding jit mode</div>