Core Layout and Display Utilities

Tailwind provides utilities for every CSS display and positioning property. The display utilities — block, inline-block, inline, flex, inline-flex, grid, inline-grid, hidden — control how elements participate in document flow. Positioning utilities — static, relative, absolute, fixed, sticky — mirror their CSS counterparts, and the placement utilities top-*, right-*, bottom-*, left-*, and inset-* control the offset values. Overflow utilities (overflow-hidden, overflow-auto, overflow-scroll, overflow-x-hidden) manage content that exceeds its container. The z-index utilities z-0 through z-50, plus z-auto, handle stacking contexts. Width and height utilities span from fixed values (w-4, h-8) through percentage-based (w-1/2, w-full) to viewport units (w-screen, h-screen) and the intrinsic-size keywords (w-fit, w-max, w-min). Box sizing is set to border-box globally by Tailwind Preflight, which aligns with how most developers think about sizing. The object-fit utilities (object-cover, object-contain, object-fill, object-scale-down) control how replaced elements like images and videos fill their containers — object-cover is particularly useful for hero images and card thumbnails.

Example

<!-- Display utilities -->
<div class="block">Block element</div>
<span class="inline-block">Inline block</span>
<div class="hidden">Not rendered (display: none)</div>
<div class="invisible">Hidden but space preserved</div>

<!-- Positioning -->
<div class="relative w-64 h-32 bg-gray-100">
  <div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
    Badge
  </div>
</div>

<!-- Fixed header -->
<header class="fixed top-0 left-0 right-0 z-50 bg-white shadow-md h-16">
  Fixed navigation bar
</header>

<!-- Sticky sidebar -->
<aside class="sticky top-20 self-start">
  Stays visible when scrolling
</aside>

<!-- Width & height combinations -->
<div class="w-full max-w-3xl mx-auto">  <!-- centered, capped at 48rem -->
  <img class="w-full h-48 object-cover rounded-lg" src="hero.jpg" alt="" />
</div>

<!-- Overflow control -->
<div class="overflow-hidden h-24">
  Long content that gets clipped at 6rem height
</div>
<div class="overflow-x-auto">
  <table class="min-w-max">Wide table that scrolls horizontally</table>
</div>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned