Layout

Utilities for controlling display, position, overflow, z-index, and visibility of elements.

Class Reference

Display

Class	Property
`.block`	`display: block`
`.inline-block`	`display: inline-block`
`.inline`	`display: inline`
`.flex`	`display: flex`
`.inline-flex`	`display: inline-flex`
`.grid`	`display: grid`
`.hidden`	`display: none`
`.contents`	`display: contents`

Position

Class	Property
`.static`	`position: static`
`.relative`	`position: relative`
`.absolute`	`position: absolute`
`.fixed`	`position: fixed`
`.sticky`	`position: sticky`

Inset

Class	Property
`.inset-0`	`inset: 0`
`.top-0`	`top: 0`
`.right-0`	`right: 0`
`.bottom-0`	`bottom: 0`
`.left-0`	`left: 0`

Overflow

Class	Property
`.overflow-auto`	`overflow: auto`
`.overflow-hidden`	`overflow: hidden`
`.overflow-x-auto`	`overflow-x: auto`
`.overflow-y-auto`	`overflow-y: auto`

Z-Index

Class	Property
`.z-10`	`z-index: 10`
`.z-20`	`z-index: 20`
`.z-50`	`z-index: 50`

Visibility & Isolation

Class	Property
`.visible`	`visibility: visible`
`.invisible`	`visibility: hidden`
`.isolate`	`isolation: isolate`

Examples

Absolute Positioning with Inset

Position a badge in the corner of a card using relative and absolute:

Badge

Card content

<div class="relative bg-gray-100 rounded-lg p-6">
  <span class="absolute top-0 right-0 bg-blue-600 text-white text-sm px-2 py-1 rounded">Badge</span>
  <p class="text-gray-600">Card content</p>
</div>

Overflow Hidden

Clip overflowing content with overflow-hidden:

This text is long enough to overflow the container. The extra content is clipped and hidden from view.

<div class="overflow-hidden rounded-lg bg-gray-100" style="width: 200px; height: 60px;">
  <p class="p-4 text-sm">This text overflows and is clipped.</p>
</div>