Tailwind CSS Padding (original) (raw)

Last Updated : 17 Jul, 2024

This class accepts lots of values in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS Padding Property. This class is used to create space around the element, inside any defined border. We can set different paddings for individual sides (top, right, bottom, left). It is important to add border properties to implement padding properties. There are lots of CSS properties used for padding like CSS _padding-top, CSS _padding-bottom, CSS _padding-right, CSS _padding-left, etc.

**Padding classes:

Class	Description
p-0	This class is used to define the padding on all sides.
py-0	This class defines padding on the y-axis (padding-top and padding-bottom).
px-0	This class defines padding on the x-axis (padding-left and padding-right).
pt-0	This class is specifically used to add padding on top.
pr-0	This class is specifically used to add padding on the right.
pb-0	This class is specifically used to add padding on the bottom.
pl-0	This class is specifically used to add padding on the left.

**Note: You can change the number "0" with the valid "rem" values.

**p-0: This class is used to define the padding on all the sides.

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

<b>Tailwind CSS Padding Class</b>

<div class="flex justify-center">
    <div class="p-4 bg-green-300 w-24 h-24">
        <div class="border-2 border-green-800 
                bg-green-600 w-16 h-16">
        </div>
    </div>
</div>

**Output:

**py-0: This class is used to define padding on the y-axis means _padding-top and _padding-bottom.

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

<b>Tailwind CSS Padding Class</b>

<div class="flex justify-center">
    <div class="py-4 bg-green-300 w-24 h-24">
        <div class="border-2 border-green-800 
                bg-green-600 w-16 h-16">
        </div>
    </div>
</div>

**Output:

**px-0: This class is used to define padding on the x-axis means _padding-left and _padding-right.

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

<b>Tailwind CSS Padding Class</b>

<div class="flex justify-center">
    <div class="px-4 bg-green-300 w-24 h-24">
        <div class="border-2 border-green-800 
                bg-green-600 w-16 h-16">
        </div>
    </div>
</div>

**Output:

**pt-0: This class is specially used to add padding on top.

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

<b>Tailwind CSS Padding Class</b>

<div class="flex justify-center">
    <div class="pt-4 bg-green-300 w-24 h-24">
        <div class="border-2 border-green-800 
                bg-green-600 w-16 h-16">
        </div>
    </div>
</div>

**Output:

**pr-0: This class is specially used to add padding on right.

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

<b>Tailwind CSS Padding Class</b>

<div class="flex justify-center">
    <div class="pr-4 bg-green-300 w-24 h-24">
        <div class="border-2 border-green-800 
                bg-green-600 w-16 h-16">
        </div>
    </div>
</div>

**Output:

**pb-0: This class specially used to add padding on the bottom.

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

<b>Tailwind CSS Padding Class</b>

<div class="flex justify-center">
    <div class="pr-4 bg-green-300 w-24 h-24">
        <div class="border-2 border-green-800 
                bg-green-600 w-16 h-16">
        </div>
    </div>
</div>

**Output:

**pl-0: This class specially used to add padding on the left.

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

<b>Tailwind CSS Padding Class</b>

<div class="flex justify-center">
    <div class="pl-8 bg-green-300 w-24 h-24">
        <div class="border-2 border-green-800 
                bg-green-600 w-16 h-16">
        </div>
    </div>
</div>

**Output: