Padding utilities in Tailwind CSS control the space between an element's content and its border. They are essential for creating proper spacing and visual hierarchy in your designs.

Tailwind provides a comprehensive set of padding utilities that work on all sides of an element or on specific sides individually.

Use the p- prefix to apply padding to all sides of an element:

• p-0 - No padding
• p-1 - 4px padding
• p-2 - 8px padding
• p-3 - 12px padding
• p-4 - 16px padding
• p-5 - 20px padding
• p-6 - 24px padding
• p-7 - 28px padding
• p-8 - 32px padding
• p-10 - 40px padding
• p-12 - 48px padding
• p-16 - 64px padding
• p-20 - 80px padding
• p-24 - 96px padding
• p-32 - 128px padding
• p-40 - 160px padding
• p-48 - 192px padding
• p-56 - 224px padding
• p-64 - 256px padding
• p-72 - 288px padding
• p-80 - 320px padding
• p-96 - 384px padding

Use pt- to apply padding only to the top of an element:

• pt-0 - No top padding
• pt-1 - 4px top padding
• pt-2 - 8px top padding
• pt-4 - 16px top padding
• pt-8 - 32px top padding
• pt-16 - 64px top padding

Use pr- to apply padding only to the right side of an element:

• pr-0 - No right padding
• pr-2 - 8px right padding
• pr-4 - 16px right padding
• pr-8 - 32px right padding
• pr-16 - 64px right padding

Use pb- to apply padding only to the bottom of an element:

• pb-0 - No bottom padding
• pb-2 - 8px bottom padding
• pb-4 - 16px bottom padding
• pb-8 - 32px bottom padding
• pb-16 - 64px bottom padding

Use pl- to apply padding only to the left side of an element:

• pl-0 - No left padding
• pl-2 - 8px left padding
• pl-4 - 16px left padding
• pl-8 - 32px left padding
• pl-16 - 64px left padding

Use px- to apply padding to both left and right sides (horizontal):

• px-0 - No horizontal padding
• px-2 - 8px horizontal padding
• px-4 - 16px horizontal padding
• px-6 - 24px horizontal padding
• px-8 - 32px horizontal padding
• px-12 - 48px horizontal padding
• px-16 - 64px horizontal padding

Use py- to apply padding to both top and bottom sides (vertical):

• py-0 - No vertical padding
• py-2 - 8px vertical padding
• py-4 - 16px vertical padding
• py-6 - 24px vertical padding
• py-8 - 32px vertical padding
• py-12 - 48px vertical padding
• py-16 - 64px vertical padding

Use square brackets to apply any custom padding value:

• p-[10px] - Custom 10px padding
• p-[2.5rem] - Custom 2.5rem padding
• px-[15%] - Custom 15% horizontal padding
• py-[1.2em] - Custom 1.2em vertical padding

Combine padding utilities with responsive prefixes:

• p-4 md:p-8 - 16px padding, 32px on medium screens
• px-2 lg:px-12 - 8px horizontal, 48px on large screens
• py-4 sm:py-6 xl:py-12 - Responsive vertical padding