Positioning

Using inset-0 for Full Coverage

Instead of writing multiple classes to set all sides to 0:

<div class="absolute top-0 right-0 bottom-0 left-0 bg-gray-500"></div>

You can achieve the same result with a single inset-0 utility:

<div class="absolute inset-0 bg-gray-500"></div>

Advantages:

• Saves time by reducing repetitive classes.
• Improves readability and clarity in your code.
• Perfect for creating elements like overlays or full-screen sections.

Target Specific Axes: inset-x-* and inset-y-*

TailwindCSS also allows you to target specific axes:

• inset-x-*: Applies positioning to the left and right simultaneously.
• inset-y-*: Applies positioning to the top and bottom simultaneously.

Examples

Centering horizontally:

<div class="relative h-72 gap-3">
    <div class="absolute inset-x-0 top-1/2 h-12 -translate-y-1/2 bg-indigo-500"></div>
</div>

Positioning along the y-axis:

<div class="relative h-72 gap-3">
    <div class="absolute inset-y-0 left-4 w-12 bg-indigo-500"></div>
</div>

Practical Examples

<div class="fixed inset-0 bg-gray-950/35 z-40 pointer-events-auto rounded-card" data-aria-hidden="true" aria-hidden="true"></div>

<header class="h-14 shadow-sm sticky inset-x-0 top-0 border-b bg-white/50 dark:bg-gray-800/50"> </header>
<main class="p-6 space-y-4">
    <div class="bg-gray-100 rounded-2xl h-72 dark:bg-gray-800"> </div>
    <div class="bg-gray-100 rounded-2xl h-72 dark:bg-gray-800"> </div>
    <div class="bg-gray-100 rounded-2xl h-72 dark:bg-gray-800"> </div>
    <div class="bg-gray-100 rounded-2xl h-72 dark:bg-gray-800"> </div>
</main>

<div class="absolute inset-0 bg-gray-950/25 dark:bg-gray-950/50 z-40 pointer-events-auto" data-aria-hidden="true" aria-hidden="true"></div>
<div 
    id="dialog-1"
    role="dialog"
    aria-labelledby="dialog-title" 
    aria-describedby="dialog-desc"
    tabIndex="-1"
    class="absolute inset-0 z-50 rounded-2xl shadow-lg border bg-white border-gray-200 max-w-sm h-fit m-auto dark:bg-gray-900 dark:border-gray-800"
>
    <h2 id="dialog-title" class="text-gray-950 font-medium text-lg dark:text-white">Sign in to bookmark</h2>
    <p id="dialog-desc" class="mt-3 text-sm text-gray-600 dark:text-gray-400">You need to be signed in to save your frequently used components.</p>

    <div class="mt-6 flex justify-end gap-3">
        <button class="px-3 h-8 rounded-md shadow-xs flex items-center justify-center border text-sm text-gray-700 dark:text-gray-300 dark:border-gray-700 dark:bg-gray-800/15 dark:hover:bg-gray-800/50">Cancel</button>
        <button class="px-3 h-8 rounded-md shadow-xs flex items-center justify-center border border-indigo-800 bg-indigo-600 text-sm dark:border-white/15 text-white hover:bg-indigo-700">Sign In</button>
    </div>
</div>

When to Use inset-

• Use inset-0 for full coverage (overlays, containers, or absolute-positioned elements).
• Use inset-x-* or inset-y-* for axis-specific positioning.

Final Takeaway

The inset-* utilities in TailwindCSS help you write cleaner and more concise code for positioning. Replace multiple classes like top-0, right-0, etc., with a single inset- utility to simplify your workflow and maintain consistency.