Tailwind CSS Layout

Layout is the skeleton of any web design. Tailwind provides a complete set of powerful utility classes to control element layout, from display methods to positioning, to hierarchical relationships. This chapter introduces the most core layout tools.

Display

The display property determines how elements are presented. Tailwind provides utility classes for all standard display values.

• block: Element takes up an entire line, width defaults to 100% of parent.
• inline-block: Elements arrange like text but can have width, height, and margins set.
• inline: Elements arrange like text but cannot have width/height set.
• flex: Enables Flexbox layout model (see "Flex & Grid" chapter).
• grid: Enables Grid layout model (see "Flex & Grid" chapter).
• hidden: Completely hides the element, equivalent to display: none;.

<div class="flex ...">...</div>

Position

The position property is used to control how elements are positioned.

• static: Default value, element follows normal document flow.
• relative: Element is positioned relative to its normal position, often used as a container for absolute positioned elements.
• absolute: Element is positioned relative to its nearest non-static positioned ancestor.
• fixed: Element is positioned relative to the browser viewport, it stays in the same position even when the page scrolls.
• sticky: Sticky positioning, a hybrid of relative and fixed. Element is relatively positioned until it crosses a specific threshold, then becomes fixed.

<div class="relative h-32 ...">
  <div class="absolute bottom-0 left-0 ...">...</div>
</div>

Top / Right / Bottom / Left

When an element's position is not static, you can use these utility classes to control its position.

• top-0, left-0, right-0, bottom-0: Align element edges to its positioning parent's edges.
• inset-0: Shorthand for top-0 left-0 right-0 bottom-0.
• inset-x-0: Shorthand for left-0 right-0.
• inset-y-0: Shorthand for top-0 bottom-0.

Tailwind provides these utilities for all spacing units in the theme (like top-4), and supports arbitrary values (like top-[23px]).

Z-Index

The z-index property controls the stacking order of elements on the Z-axis. Elements with higher z-index values will display on top of elements with lower values.

• z-0, z-10, z-20, z-30, z-40, z-50
• z-auto

<div class="relative">
  <div class="absolute z-10 ...">...</div>
  <div class="absolute z-20 ...">I'm on top</div>
</div>

Overflow

The overflow property controls what happens when element content exceeds its container size.

• overflow-auto: Browser will add scrollbars if needed.
• overflow-hidden: Overflowing content is clipped and not visible.
• overflow-visible: Default value, content overflows the container.
• overflow-scroll: Always shows scrollbars regardless of whether content overflows.
• overflow-x-scroll, overflow-y-auto: Control horizontal or vertical overflow separately.

<!-- A vertically scrollable list -->
<div class="h-64 overflow-y-auto">
  <!-- ... lots of content ... -->
</div>

Mastering these core layout tools is the foundation for building any complex web structure with Tailwind.