Tailwind CSS - Padding

Tailwind CSS: Padding

Padding utilities in Tailwind CSS are used to create inner space within an element, pushing its content away from its border. These utilities are fundamental to controlling layout and spacing, and they are built upon a consistent and customizable spacing scale.

Understanding the Spacing Scale

Tailwind’s padding utilities (like p-4) don’t correspond to raw pixel values. Instead, they map to a predefined spacing scale, where p-4 typically equals 1rem (or 16px by default). This system ensures consistent spacing across your entire application. The scale is fully customizable in your tailwind.config.js file.

Padding Class Reference

You can apply padding to all sides of an element, on a specific axis (horizontal/vertical), or to a single side.

Class Pattern	Description
p-{amount}	Adds equal padding to all four sides.
py-{amount}	Adds padding to the vertical (y-axis) sides (top and bottom).
px-{amount}	Adds padding to the horizontal (x-axis) sides (left and right).
pt-{amount}	Adds padding to the top side.
pr-{amount}	Adds padding to the right side.
pb-{amount}	Adds padding to the bottom side.
pl-{amount}	Adds padding to the left side.
ps-{amount}	Logical Property: Adds padding to the ‘inline-start’ side (left in LTR, right in RTL).
pe-{amount}	Logical Property: Adds padding to the ‘inline-end’ side (right in LTR, left in RTL).

Practical Application & Examples

The following example demonstrates how to use various padding utilities to style a card component. The light green area visualizes the padding being applied.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Padding Example</title>
</head>
<body class="bg-slate-100 p-8 flex flex-wrap gap-8 justify-center">

    <!-- Card with uniform padding -->
    <div class="w-64 bg-green-200 rounded-lg border border-green-500 p-4">
        <div class="bg-green-600 text-white p-4 rounded">
            <h3 class="font-bold">Uniform Padding</h3>
            <p class="text-sm">Class: `p-4`</p>
        </div>
    </div>

    <!-- Card with axis padding -->
    <div class="w-64 bg-blue-200 rounded-lg border border-blue-500 px-6 py-3">
        <div class="bg-blue-600 text-white p-4 rounded">
            <h3 class="font-bold">Axis Padding</h3>
            <p class="text-sm">Classes: `px-6 py-3`</p>
        </div>
    </div>

    <!-- Card with single-side padding -->
    <div class="w-64 bg-red-200 rounded-lg border border-red-500 pt-8 pb-4 pl-2 pr-10">
        <div class="bg-red-600 text-white p-4 rounded">
            <h3 class="font-bold">Single Side Padding</h3>
            <p class="text-sm">Classes: `pt-8 pb-4 pl-2 pr-10`</p>
        </div>
    </div>

</body>
</html>

Using Arbitrary Values

Modern Tailwind CSS allows you to use arbitrary values for one-off spacing needs that aren’t covered by your theme’s scale. Use square brackets [] to specify a custom value.

<!-- This element will have exactly 13px of padding on the top -->
<div class="pt-[13px]">...</div>

<!-- You can use other units too -->
<div class="p-[2.5rem]">...</div>

Common Mistakes

• Padding vs. Margin: Remember that padding creates space inside an element’s border, while margin (m-*) creates space outside it. Use padding to increase the space between content and its own border, and margin to increase the space between two separate elements.
• Confusion with px unit: The class px-4 applies horizontal padding from the spacing scale. It does not mean padding: 4px;. This is a common point of confusion for beginners.