Can we use Padding Negative in Tailwind CSS ?

Last Updated : 26 May, 2023

It is to be noted that Tailwind CSS doesn’t support negative padding values, or in other words, there is no concept that exists for utilizing the padding value as negative.

Note: Padding cannot be negative, so instead of using this, you can use negative margin.

Instead of using this (negative padding), the negative margin can be used by specifying the dash as a prefix followed by the class name, in order to convert it to a negative value. In this article, we’ll see the usage of the margin negative in a tailwind CSS, in order to create the responsive design.

Syntax: It is the basic syntax of negative margin.

<element class="-mt-* ..."></element>

Here, the * denotes any integer value, mt denotes the margin-top. We can use b, l, and r, for bottom, left, & right respectively with margin property.

Tailwind class for negative Margin:

-m*-{size}: This class will be utilized to sets a negative margin followed by providing the sides(i.e. top, right, bottom left) values & the integer value for the size.

Example: This example demonstrates including the negative margin classes to the element using Tailwind CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet" /> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-700  
               text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
  
    <h3 class="text-2xl"> 
        Tailwind CSS Negative Margin 
    </h3> 
    <div> 
        <div class="bg-green-700 p-4 -mt-2"> 
            <p>This is negative margin example</p> 
        </div> 
    </div> 
</body> 
  
</html>