Tailwind Padding

The padding utility class in Tailwind CSS allows you to easily add padding to elements, creating space between the content and the element's edges. It provides a set of classes that enable you to specify the padding in different directions, allowing you to create consistent spacing in your layouts.

How to Set Tailwind Padding

To apply Tailwind padding to an element, you can use the p-{size} class, where {size} can be one of the following options:

• p-0: This sets the padding to 0, removing any space around the element.

• p-1: This sets a small padding size.

• p-2: This sets a medium padding size.

• p-3: This sets a large padding size.

• p-4: This sets an extra-large padding size.

• p-5: This sets a huge padding size.

You can also use the px-{size} and py-{size} classes to set the horizontal and vertical padding, respectively. For example, px-2 sets the horizontal padding to a medium size, and py-4 sets the vertical padding to an extra-large size.

<div class="flex py-4">
	<div class="pt-10...">pt-10</div>
	<div class="pb-10...">pb-10</div>
	<div class="pr-10....">pr-10</div>
	<div class="pl-10....">pl-10</div>
</div>

Preview

Tailwind Padding Horizontally

You can control the horizontal padding of your element by using the px-{size} utility.

<div class=" bg-indigo-200 h-16  w-32 px-8">
	<div
		class="bg-indigo-500 h-16 w-16 rounded-md flex justify-center items-center text-white font-extrabold"
	>
		px-8
	</div>
</div>

Preview

Tailwind Padding Vertically

You can control the vertical padding of your element by using the py-{size} utility.

<div class=" bg-indigo-200 h-32 w-16 py-8....">py-8</div>

Preview

Responsive Tailwind Padding

Tailwind CSS provides responsive utility classes for padding, allowing you to control the padding size at different breakpoints. To use responsive Tailwind padding classes, you can append the breakpoint prefix to the padding classes. For example, md:p-2 sets the padding size to medium starting from the medium breakpoint and above.

<div class="p-4 md:p-2">This is a padded div.</div>

Tailwind Padding Class Table

📚 Further Exploration

• Tailwind Margin

Windframe Tailwind blocks

Landing page