How to Use Custom Percentages in Padding in Tailwind CSS?

Last Updated : 23 Jul, 2025

We know that Tailwind CSS provides a utility-first approach for styling web applications, which makes it easy to apply styles directly in HTML. This article guide will explain how to use custom percentages in padding within Tailwind CSS.

Approach: Using Custom Utility Classes

This approach involves custom utility classes in your CSS file and applying them in your HTML.
Creating custom utility classes in Tailwind CSS involves defining your utility styles that extend the framework's default utility classes.

Creating a Tailwind Configuration File:

First to install a 'tailwind.config.js' file in project .for this file follow the below command line:

npx tailwindcss init

This configuration extends the default padding scale to include 'p-25p' and 'p-50p', which apply 25% and 50% padding.

Edit Your 'tailwind.config.js' file as follows:

JavaScript

// tailwind.config.js
module.exports = {
    theme: {
      extend: {
        padding: {
          '25p': '25%',
          '50p': '50%',
        },
      },
    },
    plugins: [],
};

Example: The first HTML div will have 25% padding and a blue background. The second HTML div will have 50% padding and a green background. With configuration set up, you can now use the custom utility classes in your HTML. This file add a custom padding values ('25%' and '50%') in the 'tailwind.config.js'. Apply the custom classes ('p-25p' and 'p-50p') in your HTML.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Custom Padding Example</title>
    <link href="styles.css" rel="stylesheet">
</head>

<body class="bg-gray-100 text-gray-900
             font-sans leading-normal">
    <div class="container mx-auto p-4">
        <h1 class="text-center text-3xl
                   font-bold mb-8">
            Custom percentages in Padding Example
        </h1>
        <div class="p-25p bg-blue-500
                    text-white p-4 border">
            <p class="text-center">
                This div has 25% padding.
            </p>
        </div>
        <div class="p-50p bg-green-500
                    text-white p-4 border mt-8">
            <p class="text-center">
                This div has 50% padding.
            </p>
        </div>
    </div>
</body>

</html>