Use Custom Percentage Values for Padding in Tailwind CSS

Tailwind CSS provides numerous predefined utility classes for styling components, like padding. Sometimes, it is difficult to establish the necessary spacing and responsiveness for various screen sizes and content types using these predefined classes. Tailwind CSS allows us to give a percentage value to the padding, which will help in making the project responsive.

Using Custom Percentage In Padding

The following approaches in Tailwind CSS allow us to achieve a responsive and attractive layout for the project using Custom Percentage in Padding.

Extending Tailwind's Configuration

We can easily use custom percentage values for padding in Tailwind CSS by extending the Tailwind CSS configuration file. To do that, follow the steps mentioned below:

  • Open 'tailwind.config.js': The 'tailwind.config.js' file is where you can customize your Tailwind CSS settings, typically located in your project's main folder. If you don't have this file, you can create one by running the following command in your terminal.
npx tailwindcss init

And follow the Tailwind CSS Installation Guide.

  • Add Custom Padding Values: In the 'theme.extend' section of the 'tailwind.config.js' file, add your desired percentage values for padding. This allows you to create custom utility classes for padding.
    • module.exports = {
    theme: {
        extend: {
        padding: {
            '1/20': '5%',   // Custom class for 5% padding
            '1/10': '10%',    // Custom class for 10% padding
            '3/10': '30%',   // Custom class for 30% padding
        },
        },
    },
 };
  • Apply Custom Classes in HTML: After setting the custom padding values, use them in your HTML.

    • Example Code

    <!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>
        Custom Percentage in Padding
    </title>
</head>
<body>
    <div class="p-1/20 mb-3
                bg-green-400">
        Content with 5% padding
    </div>
    <div class="p-1/10 bg-yellow-400">
        Content with 10% padding
    </div>
</body>
</html>

    Output


    Using Arbitrary Values

    The latest versions of Tailwind CSS allow you to easily apply custom padding using arbitrary values. It allows you to use square brackets to specify your custom percentage value directly in your class.

    Syntax

    <div class="p-[10%]">
 Your content here
</div>

    Example Code

    <!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>
        Custom Percentage in Padding
    </title>
</head>
<body>
    <div class="p-[5%] bg-violet-400 mb-3">
        Content with 5% padding
    </div>
    <div class="p-[10%] bg-pink-400">
        Content with 10% padding
    </div>
</body>
</html>

    Output


    Updated on: 2024-11-08T11:20:50+05:30

    90 Views

    Kickstart Your Career

    Get certified by completing the course

    Get Started
    Advertisements