Negative Spacing Values in Tailwind Config
Configure negative margin, inset, and translate values in your Tailwind configuration for precise layout control with pull and offset patterns.
Detailed Explanation
Negative Spacing in Tailwind
Tailwind automatically generates negative variants for spacing utilities. If you add a spacing value of "128": "32rem", you automatically get -m-128, -mt-128, -translate-x-128, etc.
How Negatives Are Generated
In Tailwind v3, you do not need to configure negative values separately. Any value in theme.spacing or theme.extend.spacing automatically gets a negative counterpart:
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
"18": "4.5rem",
},
},
},
};
This gives you both m-18 (positive) and -m-18 (negative).
Common Negative Spacing Patterns
Pull elements outside their container:
<div class="px-6">
<img class="-mx-6 w-[calc(100%+3rem)]" />
</div>
Overlap elements:
<div class="relative">
<div class="absolute -top-4 -right-4">
<span class="badge">New</span>
</div>
</div>
Fine-tune alignment:
<p class="-mt-1 text-sm text-gray-500">
Subtitle with tighter spacing
</p>
Custom Negative-only Values
If you need a negative value without a positive counterpart (rare), use arbitrary values:
<div class="-mt-[3px]">Fine adjustment</div>
Use Case
Use negative spacing when you need to pull elements outside their parent padding, create overlapping card layouts, or fine-tune visual alignment.