Padding

Adds space inside an element's borders, between the element's content and its border. Padding creates breathing room within components, improves readability, and makes UI elements more touchable. Tailwind's padding utilities follow a consistent spacing scale based on 0.25rem (4px) increments that create harmonious, proportional spacing throughout your design.

Spacing2 variants4 examples

Official Docs Open Playground

Basic usage: <div class="p-4 bg-blue-100 rounded">Padding on all sides (1rem)</div>

Examples

Basic padding on all sides (1rem / 16px)

<div class="p-4 bg-blue-100 rounded">Padding on all sides (1rem)</div>

Edit in playground

Different padding on horizontal (1rem) and vertical (0.5rem) axes

<div class="px-4 py-2 bg-green-100 rounded">Horizontal and vertical padding</div>

Edit in playground

Individual padding for each side (top: 2rem, right: 1rem, bottom: 3rem, left: 1rem)

<div class="pt-8 pr-4 pb-12 pl-4 bg-yellow-100 rounded">
  Different padding on each side
</div>

Edit in playground

Responsive padding that increases on larger screens

<!-- Responsive padding example -->
<div class="p-4 md:p-8 lg:p-12 bg-purple-100 rounded-lg">
  <h2 class="text-xl font-bold mb-4">Card Title</h2>
  <p>This card has padding that increases on larger screens, providing appropriate spacing for different devices.</p>
</div>

Edit in playground