Inset Utilities (Top, Right, Bottom, Left)

1. Inset Utility Classes

Tailwind provides both combined and directional inset classes:

• inset-0 – Sets top, right, bottom, and left to 0
• top-4, right-2, bottom-8, left-1 – Set values independently
• inset-x-4 – Sets left and right together
• inset-y-2 – Sets top and bottom together

2. Example: Inset with Absolute Positioning

<div class="relative w-64 h-32 bg-gray-200">
    <div class="absolute top-2 right-2 bg-blue-500 text-white px-3 py-1 rounded">
        Top Right Box
    </div>
</div>
            

3. Full Coverage (Inset 0)

Using inset-0 can make an element stretch fully over its parent:

<div class="relative w-64 h-32 bg-gray-300">
    <div class="absolute inset-0 bg-black opacity-30"></div>
    <p class="relative z-10 text-white p-4">Overlay Content</p>
</div>
            

4. Custom Values

You can extend the theme in tailwind.config.js to include custom spacing values:

module.exports = {
  theme: {
    extend: {
      inset: {
        '1/2': '50%',
        'full': '100%',
        'n-4': '-1rem',
      }
    }
  }
}
            

5. Tips & Notes

• Inset utilities only work on elements with relative, absolute, fixed, or sticky position.
• Combine with z-index and background colors for overlays.

Conclusion

Inset utilities in Tailwind make it easy to control placement without writing custom CSS. Whether aligning a tooltip, overlay, or sticky header — these utilities save time and add flexibility.