Inset is shorthand for top, right, bottom, and left. It pins absolutely positioned elements to edges.
When to use
Full-bleed overlays, centered modals, and filling a relative parent edge to edge.
Core concepts
- Each side can be a length, percentage, or auto.
- Equal values on all sides collapse to the inset shorthand.
- absolute inset-0 is the classic full-bleed overlay pattern.
Class combinations
Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.
Full overlay
absolute inset-0Pins all four edges to the containing block. Common for modal backdrops and cover layers.
Dead center
absolute inset-0 m-auto size-48inset-0 stretches the box; auto margins + explicit size center it without flex or transform.
Summary
- inset is shorthand for top, right, bottom, and left on positioned elements: one declaration instead of four.
- inset: 0 is the classic full-bleed overlay pattern for modals, drawers, and cover layers.
- Individual sides still override shorthand when you need asymmetric pinning, like bottom-right toast placement.
- inset only works when position is absolute, fixed, or sticky. static and relative ignore these offsets for layout.
- Tailwind exposes inset utilities as inset-*, top-*, right-*, bottom-*, left-* with arbitrary values when needed.