Tailwind CSS Padding - GeeksforGeeks

23 Mar, 2022
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:
p-0: This class is used to define the padding on all the sides.
py-0: This class is used to define padding on the y-axis i.e padding-top and padding-bottom.
px-0: This class is used to define padding on the x-axis i.e padding-left and padding-right.
pt-0: This class is specially used to add padding on top.
pr-0: This class is specially used to add padding on right.
pb-0: This class is specially used to add padding on the bottom.
pl-0: This class is specially used to add padding on 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:
<element class="p-0">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <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></body>   </html>
Output:
py-0: This class is used to define padding on the y-axis means padding-top and padding-bottom.
Syntax:
<element class="py-0">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <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></body>   </html>
Output:
px-0: This class is used to define padding on the x-axis means padding-left and padding-right.
Syntax:
<element class="px-0">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <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></body>   </html>
Output:
pt-0: This class is specially used to add padding on top.
Syntax:
<element class="pt-0">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <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></body>   </html>
Output:
pr-0: This class is specially used to add padding on right.
Syntax:
<element class="pr-0">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <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></body>   </html>
Output:
pb-0: This class specially used to add padding on the bottom.
Syntax:
<element class="pb-0">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <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></body>   </html>
Output:
pl-0: This class specially used to add padding on the left.
Syntax:
<element class="pl-0">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <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></body>   </html>
Output:
Tailwind CSS
Tailwind-Spacing
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Top 10 Angular Libraries For Web Developers
How to calculate the number of days between two dates in javascript?
How to create footer to stay at the bottom of a Web page?
Difference between var, let and const keywords in JavaScript