Tailwind CSS Padding Tutorial for Beginners
Spacing is one of the most important parts of web design. If spacing is wrong, your UI looks unprofessional — even if everything else is correct.
In this tutorial, you will learn how to use padding in Tailwind CSS step by step with practical examples using CDN.
By the end of this guide, you will understand:
- How to add padding on all sides
- How to add padding to specific sides
- The difference between px and py
- How to use responsive padding
- How to use custom padding values
Let’s start.
What is Padding in CSS?
Padding is the space inside an element, between its content and its border.
Example in traditional CSS:
padding: 20px;
In Tailwind CSS, instead of writing custom CSS, we use utility classes.
Example:
<div class="p-5"></div>
Much cleaner and faster.
How to Add Padding on All Sides in Tailwind CSS
To apply padding on all four sides, use:
p-<number>
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-10">
<div class="p-8 bg-blue-500 text-white rounded-lg">
This box has padding on all sides.
</div>
</body>
</html>
How it Works
- p-4 = 1rem
- p-8 = 2rem
- p-2 = 0.5rem
Tailwind uses a predefined spacing scale.
How to Add Padding to One Side
Tailwind allows you to control each side individually.
- pt-4 → top
- pr-4 → right
- pb-4 → bottom
- pl-4 → left
Example:
<div class="pt-6 bg-green-500 text-white">Top padding</div>
<div class="pr-6 bg-purple-500 text-white mt-4">Right padding</div>
<div class="pb-6 bg-red-500 text-white mt-4">Bottom padding</div>
<div class="pl-6 bg-yellow-500 text-black mt-4">Left padding</div>
This gives you full control over layout spacing.
Horizontal Padding (px)
If you want padding only on the left and right sides:
px-<number>
Example:
<div class="px-8 py-4 bg-indigo-500 text-white rounded-lg">
Horizontal padding using px-8
</div>
Here, px-8 adds padding to both left and right sides.
Vertical Padding (py)
If you want padding only on the top and bottom:
py-<number>
Example:
<div class="py-8 px-4 bg-pink-500 text-white rounded-lg">
Vertical padding using py-8
</div>
Responsive Padding in Tailwind CSS
Tailwind follows a mobile-first approach.
You can apply different padding at different screen sizes using breakpoints.
Example:
<div class="py-4 md:py-8 lg:py-12 bg-teal-500 text-white">
Responsive padding example
</div>
Explanation:
- Mobile → py-4
- Medium screens → py-8
- Large screens → py-12
This is very useful in real-world projects.
Custom Padding Values
Sometimes predefined spacing is not enough.
You can use custom values:
<div class="p-[25px] bg-gray-700 text-white">
Custom padding 25px
</div>
You can also use CSS variables:
<div class="p-(--my-padding)">
Using CSS variable
</div>
This gives advanced flexibility.
Best Practices for Beginners
If you are learning Tailwind CSS:
- Use consistent spacing (4, 6, 8)
- Avoid too many custom values
- Follow mobile-first approach
- Understand the difference between margin and padding
- Practice by building small UI components
Frequently Asked Questions (FAQ)
What does p-4 mean in Tailwind CSS?
p-4 means padding: 1rem on all four sides.
What is the difference between px and py in Tailwind?
px adds padding to left and right. py adds padding to top and bottom.
How do I add padding only on mobile?
Just use p-4 without breakpoint. Tailwind is mobile-first by default.
How do I add padding only on desktop?
Use a breakpoint like:
lg:p-8
Your Feedback
Help us improve by sharing your thoughts
At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.
Terms Disclaimer About Us Contact Us
Copyright 2023-2026 © All rights reserved.