Quick Guide To Tailwind Padding
In this article, we will discuss the Tailwind padding property and its various uses with examples.
Padding is a CSS property that allows you to add space between an element’s content and its border.
It defines the space inside an element’s border and can be applied to all four sides of an element or individually to the top, right, bottom, or left sides.
Table Of Content-
What is Tailwind Padding?
Tailwind padding refers to the space between an element’s content and its border. In other words, padding is the space within an element.
Tailwind padding classes are designed to provide you with a quick and easy way to add padding to an element.
Tailwind padding classes are applied using the p prefix and a number representing the desired padding size.
Tailwind Padding Classes
The following table provides a comprehensive list of Tailwind padding classes:
| Classes | Overview |
| p-0 | Used to set the padding on all sides of an element to 0. |
| px-0 | Used to set the horizontal padding of an element to 0. |
| py-0 | Used to set the vertical padding of an element to 0. |
| pt-0 | Used to set the padding on the top of an element to 0. |
| pr-0 | Used to set the padding on the right side of an element to 0. |
| pb-0 | Used to set the padding on the bottom of an element to 0. |
| pl-0 | Used to set the padding on the left side of an element to 0. |
| p-px | This class is used to define the padding as 1px on all sides of an element. |
| px-px | This class is used to define the padding as 1px along the x-axis of an element. |
| py-px | This class is used to define the padding as 1px along the y-axis of an element. |
| pt-px | This class is used to define the padding as 1px on the top of an element. |
| pr-px | This class is used to define the padding as 1px on the right side of an element. |
| pb-px | This class is used to define the padding as 0 on the bottom of an element. |
| pl-px | This class is used to define the padding as 0 on the left side of an element. |
| p-0.5 | Specifies the padding on all sides of an element as 0.125rem or 2px. |
| px-0.5 | Specifies the padding along the x-axis of an element as 0.125rem or 2px. |
| py-0.5 | Specifies the padding along the y-axis of an element as 0.125rem or 2px. |
| pt-0.5 | Specifies the padding on the top of an element as 0.125rem or 2px. |
| pr-0.5 | Specifies the padding on the right side of an element as 0.125rem or 2px. |
| pb-0.5 | Specifies the padding on the bottom of an element as 0.125rem or 2px. |
| pl-0.5 | Specifies the padding on the left side of an element as 0.125rem or 2px. |
| p-1 | In this case, the padding on all sides of an element is defined as 0.25rem or 4px. |
| px-1 | In this case, the horizontal padding of an element is defined as 0.25rem or 4px. |
| py-1 | In this case, the vertical padding of an element is defined as 0.25rem or 4px. |
| pt-1 | In this case, the padding on the top of an element is defined as 0.25rem or 4px. |
| pr-1 | In this case, the padding on the right side of an element is defined as 0.25rem or 4px. |
| pb-1 | In this case, the padding on the bottom of an element is defined as 0.25rem or 4px. |
| pl-1 | In this case, the padding on the left side of an element is defined as 0.25rem or 4px. |
| p-1.5 | Using this class the padding on all sides of an element is set to 0.375rem or 6px. |
| px-1.5 | Using this class the horizontal padding of an element is set to 0.375rem or 6px. |
| py-1.5 | Using this class the vertical padding of an element is set to 0.375rem or 6px. |
| pt-1.5 | Using this class the padding on the top of an element is set to 0.375rem or 6px. |
| pr-1.5 | Using this class the padding on the right side of an element is set to 0.375rem or 6px. |
| pb-1.5 | Using this class the padding on the bottom of an element is set to 0.375rem or 6px. |
| pl-1.5 | Using this class the padding on the left side of an element is set to 0.375rem or 6px. |
| p-2 | The purpose of this class is to set the padding on all sides of an element as 0.5rem or 8px. |
| px-2 | The purpose of this class is to set the padding along the x-axis of an element as 0.5rem or 8px. |
| py-2 | The purpose of this class is to set the padding along the y-axis of an element as 0.5rem or 8px. |
| pt-2 | The purpose of this class is to set the padding on the top of an element as 0.5rem or 8px. |
| pr-2 | The purpose of this class is to set the padding on the right side of an element as 0.5rem or 8px. |
| pb-2 | The purpose of this class is to set the padding on the bottom of an element as 0.5rem or 8px. |
| pl-2 | The purpose of this class is to set the padding on the left side of an element as 0.5rem or 8px. |
| p-2.5 | This class is used to set the padding on all sides of an element as 0.625rem or 10px. |
| px-2.5 | This class is used to set the padding along the x-axis of an element as 0.625rem or 10px. |
| py-2.5 | This class is used to set the padding along the y-axis of an element as 0.625rem or 10px. |
| pt-2.5 | This class is used to set the padding on the top of an element as 0.625rem or 10px. |
| pr-2.5 | This class is used to set the padding on the right side of an element as 0.625rem or 10px. |
| pb-2.5 | This class is used to set the padding on the bottom of an element as 0.625rem or 10px. |
| pl-2.5 | This class is used to set the padding on the left side of an element as 0.625rem or 10px. |
| p-3 | In this case, the padding on all sides of an element is defined as 0.75rem or 12px. |
| px-3 | In this case, the horizontal padding of an element is defined as 0.75rem or 12px. |
| py-3 | In this case, the vertical padding on all sides of an element is defined as 0.75rem or 12px. |
| pt-3 | In this case, the padding on the top of an element is defined as 0.75rem or 12px. |
| pr-3 | In this case, the padding on the right side of an element is defined as 0.75rem or 12px. |
| pb-3 | In this case, the padding on the bottom of an element is defined as 0.75rem or 12px. |
| pl-3 | In this case, the padding on the left side of an element is defined as 0.75rem or 12px. |
| p-3.5 | Specifies the padding on all sides of an element as 0.875rem or 14px. |
| px-3.5 | Specifies the padding along the x-axis of an element as 0.875rem or 14px. |
| py-3.5 | Specifies the padding along the y-axis of an element as 0.875rem or 14px. |
| pt-3.5 | Specifies the padding on the top of an element as 0.875rem or 14px. |
| pr-3.5 | Specifies the padding on the right side of an element as 0.875rem or 14px. |
| pb-3.5 | Specifies the padding on the bottom of an element as 0.875rem or 14px. |
| pl-3.5 | Specifies the padding on the left side of an element as 0.875rem or 14px. |
| p-4 | This class is used to set the padding on all sides of an element as 1rem or 16px. |
| px-4 | This class is used to set the padding along the x-axis of an element as 1rem or 16px. |
| py-4 | This class is used to set the padding along the y-axis of an element as 1rem or 16px. |
| pt-4 | This class is used to set the padding on the top of an element as 1rem or 16px. |
| pr-4 | This class is used to set the padding on the right side of an element as 1rem or 16px. |
| pb-4 | This class is used to set the padding on the bottom of an element as 1rem or 16px. |
| pl-4 | This class is used to set the padding on the left side of an element as 1rem or 16px. |
| p-5 | Used to set the padding on all sides of an element to 1.25rem or 20px. |
| px-5 | Used to set the horizontal padding of an element to 1.25rem or 20px. |
| py-5 | Used to set the vertical padding of an element to 1.25rem or 20px. |
| pt-5 | Used to set the padding on the top of an element to 1.25rem or 20px. |
| pr-5 | Used to set the padding on the right side of an element to 1.25rem or 20px. |
| pb-5 | Used to set the padding on the bottom of an element to 1.25rem or 20px. |
| pl-5 | Used to set the padding on the left of an element to 1.25rem or 20px. |
| p-6 | In this case, the padding on all sides of an element is defined as 1.5rem or 24px. |
| px-6 | In this case, the padding along the x-axis of an element is defined as 1.5rem or 24px. |
| py-6 | In this case, the padding along the y-axis of an element is defined as 1.5rem or 24px. |
| pt-6 | In this case, the padding on the top of an element is defined as 1.5rem or 24px. |
| pr-6 | In this case, the padding on the right side of an element is defined as 1.5rem or 24px. |
| pb-6 | In this case, the padding on the bottom of an element is defined as 1.5rem or 24px. |
| pl-6 | In this case, the padding on the left side of an element is defined as 1.5rem or 24px. |
| p-7 | This class applies a padding of 1.75rem or 28px on all sides of an element. |
| px-7 | This class applies a padding of 1.75rem or 28px along the x-axis of an element. |
| py-7 | This class applies a padding of 1.75rem or 28px along the y-axis of an element. |
| pt-7 | This class applies a padding of 1.75rem or 28px on the top of an element. |
| pr-7 | This class applies a padding of 1.75rem or 28px on the right side of an element. |
| pb-7 | This class applies a padding of 1.75rem or 28px on the bottom of an element. |
| pl-7 | This class applies a padding of 1.75rem or 28px on the left side of an element. |
| p-8 | Purpose of this class is to set the padding of an element as 2rem or 32px on all sides. |
| px-8 | Purpose of this class is to set the padding of an element as 2rem or 32px along the x-axis. |
| py-8 | Purpose of this class is to set the padding of an element as 2rem or 32px along the y-axis. |
| pt-8 | Purpose of this class is to set the padding of an element as 2rem or 32px on the top. |
| pr-8 | Purpose of this class is to set the padding of an element as 2rem or 32px on the right side. |
| pb-8 | Purpose of this class is to set the padding of an element as 2rem or 32px on the bottom. |
| pl-8 | Purpose of this class is to set the padding of an element as 2rem or 32px on the left side. |
| p-9 | Applies a padding of 2.25rem or 36px on all sides of an element. |
| px-9 | Applies a padding of 2.25rem or 36px along the x-axis of an element. |
| py-9 | Applies a padding of 2.25rem or 36px along the y-axis of an element. |
| pt-9 | Applies a padding of 2.25rem or 36px on the top of an element. |
| pr-9 | Applies a padding of 2.25rem or 36px on the right side of an element. |
| pb-9 | Applies a padding of 2.25rem or 36px on the bottom of an element. |
| pl-9 | Applies a padding of 2.25rem or 36px on the left side of an element. |
| p-10 | This class is used to specify the padding on all sides of an element as 2.5rem or 40px. |
| px-10 | This class is used to specify the padding along the x-axis of an element as 2.5rem or 40px. |
| py-10 | This class is used to specify the padding along the y-axis of an element as 2.5rem or 40px. |
| pt-10 | This class is used to specify the padding on the top of an element as 2.5rem or 40px. |
| pr-10 | This class is used to specify the padding on the right side of an element as 2.5rem or 40px. |
| pb-10 | This class is used to specify the padding on the bottom of an element as 2.5rem or 40px. |
| pl-10 | This class is used to specify the padding on the left side of an element as 2.5rem or 40px. |
| p-11 | This class sets the padding on all sides of an element as 2.75rem or 44px. |
| px-11 | This class sets the padding along the x-axis of an element as 2.75rem or 44px. |
| py-11 | This class sets the padding along the y-axis of an element as 2.75rem or 44px. |
| pt-11 | This class sets the padding on the top of an element as 2.75rem or 44px. |
| pr-11 | This class sets the padding on the right side of an element as 2.75rem or 44px. |
| pb-11 | This class sets the padding on the bottom of an element as 2.75rem or 44px. |
| pl-11 | This class sets the padding on the left side of an element as 2.75rem or 44px. |
| p-12 | The padding on all sides of an element is set to 3rem or 48px using this class. |
| px-12 | The horizontal padding of an element is set to 3rem or 48px using this class. |
| py-12 | The vertical padding of an element is set to 3rem or 48px using this class. |
| pt-12 | The padding on the top of an element is set to 3rem or 48px using this class. |
| pr-12 | The padding on the right side of an element is set to 3rem or 48px using this class. |
| pb-12 | The padding on the bottom of an element is set to 3rem or 48px using this class. |
| pl-12 | The padding on the left side of an element is set to 3rem or 48px using this class. |
| p-14 | Specifies the padding on all sides of an element as 3.5rem or 56px. |
| px-14 | Specifies the padding along the x-axis of an element as 3.5rem or 56px. |
| py-14 | Specifies the padding along the y-axis of an element as 3.5rem or 56px. |
| pt-14 | Specifies the padding on the top of an element as 3.5rem or 56px. |
| pr-14 | Specifies the padding on the right side of an element as 3.5rem or 56px. |
| pb-14 | Specifies the padding on the bottom of an element as 3.5rem or 56px. |
| pl-14 | Specifies the padding on the left side of an element as 3.5rem or 56px. |
| p-16 | In this case, the padding on all sides of an element is set to 4rem or 64px. |
| px-16 | In this case, the horizontal padding of an element is set to 4rem or 64px. |
| py-16 | In this case, the vertical padding on all sides of an element is set to 4rem or 64px. |
| pt-16 | In this case, the padding on the top of an element is set to 4rem or 64px. |
| pr-16 | In this case, the padding on the right side of an element is set to 4rem or 64px. |
| pb-16 | In this case, the padding on the bottom of an element is set to 4rem or 64px. |
| pl-16 | In this case, the padding on all sides of an element is set to 4rem or 64px. |
| p-20 | This class ensures the padding on all sides of an element is set to 5rem or 80px. |
| px-20 | This class ensures the padding along the x-axis of an element is set to 5rem or 80px. |
| py-20 | This class ensures the padding along the y-axis of an element is set to 5rem or 80px. |
| pt-20 | This class ensures the padding on the top of an element is set to 5rem or 80px. |
| pr-20 | This class ensures the padding on the right side of an element is set to 5rem or 80px. |
| pb-20 | This class ensures the padding on the bottom of an element is set to 5rem or 80px. |
| pl-20 | This class ensures the padding on the left side of an element is set to 5rem or 80px. |
| p-24 | Applies a padding of 6rem or 96px on all sides of an element. |
| px-24 | Applies a padding of 6rem or 96px along the x-axis of an element. |
| py-24 | Applies a padding of 6rem or 96px along the y-axis of an element. |
| pt-24 | Applies a padding of 6rem or 96px on the top of an element. |
| pr-24 | Applies a padding of 6rem or 96px on the right side of an element. |
| pb-24 | Applies a padding of 6rem or 96px on the bottom of an element. |
| pl-24 | Applies a padding of 6rem or 96px on the left side of an element. |
| p-28 | This class defines the padding on all sides of an element as 7rem or 112px. |
| px-28 | This class defines the horizontal padding of an element as 7rem or 112px. |
| py-28 | This class defines the vertical padding of an element as 7rem or 112px. |
| pt-28 | This class defines the padding on the top of an element as 7rem or 112px. |
| pr-28 | This class defines the padding on the right side of an element as 7rem or 112px. |
| pb-28 | This class defines the padding on the bottom of an element as 7rem or 112px. |
| pl-28 | This class defines the padding on the left side of an element as 7rem or 112px. |
| p-32 | This class ensures the padding on all sides of an element is set to 8rem or 128px. |
| px-32 | This class ensures the horizontal padding of an element is set to 8rem or 128px. |
| py-32 | This class ensures the vertical padding of an element is set to 8rem or 128px. |
| pt-32 | This class ensures the padding on the top of an element is set to 8rem or 128px. |
| pr-32 | This class ensures the padding on the right side of an element is set to 8rem or 128px. |
| pb-32 | This class ensures the padding on the bottom of an element is set to 8rem or 128px. |
| pl-32 | This class ensures the padding on the left side of an element is set to 8rem or 128px. |
| p-36 | The padding on all sides of an element is set to 9rem or 144px using this class. |
| px-36 | The padding along the x-axis of an element is set to 9rem or 144px using this class. |
| py-36 | The padding along the y-axis of an element is set to 9rem or 144px using this class. |
| pt-36 | The padding on the top of an element is set to 9rem or 144px using this class. |
| pr-36 | The padding on the right side of an element is set to 9rem or 144px using this class. |
| pb-36 | The padding on the bottom of an element is set to 9rem or 144px using this class. |
| pl-36 | The padding on the left side of an element is set to 9rem or 144px using this class. |
| p-40 | Purpose of this class is to set the padding of an element as 10rem or 160px on all sides. |
| px-40 | Purpose of this class is to set the padding of an element as 10rem or 160px along the x-axis. |
| py-40 | Purpose of this class is to set the padding of an element as 10rem or 160px along the y-axis. |
| pt-40 | Purpose of this class is to set the padding of an element as 10rem or 160px on the top. |
| pr-40 | Purpose of this class is to set the padding of an element as 10rem or 160px on the right side. |
| pb-40 | Purpose of this class is to set the padding of an element as 10rem or 160px on the bottom. |
| pl-40 | Purpose of this class is to set the padding of an element as 10rem or 160px on the left side. |
| p-44 | This class sets the padding on all sides of an element as 11rem or 176px. |
| px-44 | This class sets the padding along the x-axis of an element as 11rem or 176px. |
| py-44 | This class sets the padding along the y-axis of an element as 11rem or 176px. |
| pt-44 | This class sets the padding on the top of an element as 11rem or 176px. |
| pr-44 | This class sets the padding on the right side of an element as 11rem or 176px. |
| pb-44 | This class sets the padding on the bottom of an element as 11rem or 176px. |
| pl-44 | This class sets the padding on the left side of an element as 11rem or 176px. |
| p-48 | Applies a padding of 12rem or 192px on all sides of an element. |
| px-48 | Applies a padding of 12rem or 192px along the x-axis of an element. |
| py-48 | Applies a padding of 12rem or 192px along the y-axis of an element. |
| pt-48 | Applies a padding of 12rem or 192px on the top of an element. |
| pr-48 | Applies a padding of 12rem or 192px on the right side of an element. |
| pb-48 | Applies a padding of 12rem or 192px on the bottom of an element. |
| pl-48 | Applies a padding of 12rem or 192px on the left side of an element. |
| p-52 | This class ensures the padding on all sides of an element is set to 13rem or 208px. |
| px-52 | This class ensures the horizontal padding of an element is set to 13rem or 208px. |
| py-52 | This class ensures the vertical padding on all sides of an element is set to 13rem or 208px. |
| pt-52 | This class ensures the padding on the top of an element is set to 13rem or 208px. |
| pr-52 | This class ensures the padding on the right side of an element is set to 13rem or 208px. |
| pb-52 | This class ensures the padding on the bottom of an element is set to 13rem or 208px. |
| pl-52 | This class ensures the padding on the left side of an element is set to 13rem or 208px. |
| p-56 | This class is used to apply a padding of 14rem or 224px on all sides of an element. |
| px-56 | This class is used to apply a padding of 14rem or 224px along the x-axis of an element. |
| py-56 | This class is used to apply a padding of 14rem or 224px along the y-axis of an element. |
| pt-56 | This class is used to apply a padding of 14rem or 224px on the top of an element. |
| pr-56 | This class is used to apply a padding of 14rem or 224px on the right side of an element. |
| pb-56 | This class is used to apply a padding of 14rem or 224px on the bottom of an element. |
| pl-56 | This class is used to apply a padding of 14rem or 224px on the left side of an element. |
| p-60 | This class defines the padding on all sides of an element as 15rem or 240px. |
| px-60 | This class defines the padding along the x-axis of an element as 15rem or 240px. |
| py-60 | This class defines the padding along the y-axis of an element as 15rem or 240px. |
| pt-60 | This class defines the padding on the top of an element as 15rem or 240px. |
| pr-60 | This class defines the padding on the right side of an element as 15rem or 240px. |
| pb-60 | This class defines the padding on the bottom of an element as 15rem or 240px. |
| pl-60 | This class defines the padding on the left side of an element as 15rem or 240px. |
| p-64 | Applies a padding of 16rem or 256px on all sides of an element. |
| px-64 | Applies a horizontal padding of 16rem or 256px of an element. |
| py-64 | Applies a vertical padding of 16rem or 256px on all sides of an element. |
| pt-64 | Applies a padding of 16rem or 256px on the top of an element. |
| pr-64 | Applies a padding of 16rem or 256px on the right side of an element. |
| pb-64 | Applies a padding of 16rem or 256px on the bottom of an element. |
| pl-64 | Applies a padding of 16rem or 256px on the left side of an element. |
| p-72 | In this case, the padding on all sides of an element is set to 18rem or 288px. |
| px-72 | In this case, the padding along the x-axis of an element is set to 18rem or 288px. |
| py-72 | In this case, the padding along the y-axis of an element is set to 18rem or 288px. |
| pt-72 | In this case, the padding on the top of an element is set to 18rem or 288px. |
| pr-72 | In this case, the padding on the right side of an element is set to 18rem or 288px. |
| pb-72 | In this case, the padding on the bottom of an element is set to 18rem or 288px. |
| pl-72 | In this case, the padding on the left side of an element is set to 18rem or 288px. |
| p-80 | This class is used to apply a padding of 20rem or 320px on the top of an element. |
| px-80 | This class is used to apply a horizontal padding of 20rem or 320px on the top of an element. |
| py-80 | This class is used to apply a vertical padding of 20rem or 320px of an element. |
| pt-80 | This class is used to apply a padding of 20rem or 320px on the top of an element. |
| pr-80 | This class is used to apply a padding of 20rem or 320px on the right side of an element. |
| pb-80 | This class is used to apply a padding of 20rem or 320px on the bottom of an element. |
| pl-80 | This class is used to apply a padding of 20rem or 320px on the left side of an element. |
| p-96 | This class specifies the padding on all sides of an element as 24rem or 384px. |
| px-96 | This class specifies the padding along the x-axis of an element as 24rem or 384px. |
| py-96 | This class specifies the padding along the y-axis of an element as 24rem or 384px. |
| pt-96 | This class specifies the padding on the top of an element as 24rem or 384px. |
| pr-96 | This class specifies the padding on the right side of an element as 24rem or 384px. |
| pb-96 | This class specifies the padding on the bottom of an element as 24rem or 384px. |
| pl-96 | This class specifies the padding on the left side of an element as 24rem or 384px. |
Syntax
<element class="p-0">...</element>
To use Tailwind padding classes in your web pages, you need to add the class to the HTML element you want to apply padding to.
Below example provides a practical implementation of Tailwind padding classes that apply padding on all four sides of an element:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Padding class in Tailwind CSS</p>
<div class="flex justify-center flex-wrap gap-2 mt-4 font-medium">
<div class="p-0 bg-gray-300 w-fit h-fit rounded">
<div class="border-2 border-black
bg-amber-400 w-16 h-16">
p-0
</div>
</div>
<div class="p-4 bg-gray-300 w-fit h-fit rounded">
<div class="border-2 border-black
bg-fuchsia-400 w-16 h-16">
p-4
</div>
</div>
<div class="p-8 bg-gray-300 w-fit h-fit rounded">
<div class="border-2 border-black
bg-blue-400 w-16 h-16">
p-8
</div>
</div>
<div class="p-12 bg-gray-300 w-fit h-fit rounded">
<div class="border-2 border-black
bg-green-500 w-16 h-16">
p-12
</div>
</div>
</div>
</body>
</html>
The following example shows a practical application of the padding horizontal and vertical classes in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Padding class in Tailwind CSS</p>
<div class="flex justify-center flex-wrap gap-4 mt-4 font-medium text-gray-200">
<div class="px-3 bg-gray-300 w-fit h-fit rounded">
<div class="border-2 border-black
bg-indigo-700 w-16 h-16">
px-3
</div>
</div>
<div class="py-4 bg-gray-300 w-fit h-fit rounded">
<div class="border-2 border-black
bg-red-600 w-16 h-16">
py-4
</div>
</div>
<div class="px-6 bg-gray-300 w-fit h-fit rounded">
<div class="border-2 border-black
bg-slate-700 w-16 h-16">
px-6
</div>
</div>
<div class="py-7 bg-gray-300 w-fit h-fit rounded">
<div class="border-2 border-black
bg-neutral-500 w-16 h-16">
py-7
</div>
</div>
</div>
</body>
</html>
Below example demonstrates the padding classes used to apply padding on individual sides of an element:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Padding class in Tailwind CSS</p>
<div class="flex justify-center flex-wrap gap-4 mt-4 font-medium text-gray-200">
<div class="pt-6 bg-gray-300 w-fit h-fit rounded">
<div class="border-2 border-black
bg-indigo-700 w-16 h-16">
pt-6
</div>
</div>
<div class="pr-5 bg-gray-300 w-fit h-fit rounded">
<div class="border-2 border-black
bg-red-600 w-16 h-16">
pr-5
</div>
</div>
<div class="pb-7 bg-gray-300 w-fit h-fit rounded">
<div class="border-2 border-black
bg-slate-700 w-16 h-16">
pb-7
</div>
</div>
<div class="pl-8 bg-gray-300 w-fit h-fit rounded">
<div class="border-2 border-black
bg-neutral-500 w-16 h-16">
pl-8
</div>
</div>
</div>
</body>
</html>
Conclusion
Tailwind padding is an essential feature that simplifies the process of creating visually appealing designs. With Tailwind padding classes, you can easily add padding to elements in your web pages, creating space between the content and the border.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
