Tailwind CSS - Layout

Tailwind CSS: Layout

Layout is the foundation of any web design. Tailwind CSS provides a powerful and comprehensive suite of utility classes for controlling every aspect of your layout, from element positioning and stacking order to creating complex, responsive grids.

Key Layout Utilities Reference

The following table provides a reference to the most important layout-related utilities in Tailwind CSS. These are the building blocks for modern web layouts.

Topic	Updated Description
Aspect Ratio (aspect-ratio)	Constrains an element to a fixed aspect ratio, perfect for responsive images and video embeds.
Container (container)	A component for fixing a container’s width to the current breakpoint, with automatic horizontal centering.
Columns (columns)	Controls the number of columns within an element, creating magazine-style text layouts.
Break After/Before/Inside	Utilities to control how page or column breaks should behave around and inside an element.
Box Sizing (box-sizing)	Utilities (box-border, box-content) to control how the browser calculates an element’s total size.
Display (display)	Controls the display behavior of an element (e.g., block, inline-block, flex, grid, hidden).
Floats (float, clear)	Legacy utilities for positioning elements. Use Flexbox or Grid for modern layouts.
Isolation (isolation)	Utilities for creating a new stacking context, useful for managing z-index.
Object Fit (object-fit)	Controls how an element’s content (like an <img> or <video>) should be resized to fit its container.
Object Position (object-position)	Specifies the alignment of an element’s content within its box.
Overflow (overflow)	Controls how to handle content that overflows an element’s box (overflow-hidden, overflow-auto).
Position (position)	Controls the positioning strategy of an element (static, relative, absolute, fixed, sticky).
Top / Right / Bottom / Left (inset)	Utilities to specify the position of absolute, fixed, or sticky elements.
Visibility (visibility)	Controls the visibility of an element (visible, invisible). invisible hides the element but preserves its space in the layout.
Z-Index (z-index)	Controls the stacking order of positioned elements. Higher values appear in front of lower values.

Mini-Project: Building a User Profile Card

This example demonstrates how to combine several layout utilities to build a common UI component. Notice the use of relative positioning on the card to create a container for the absolute positioned status badge, which is then layered on top using z-10.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout Mini-Project</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-200 flex items-center justify-center min-h-screen">

  <!-- Profile Card Container -->
  <div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg p-6 space-y-4">

    <!-- Header with Profile Picture and Status -->
    <div class="flex items-center space-x-4">
      <!-- The parent is 'relative' to contain the 'absolute' badge -->
      <div class="relative">
        <img class="w-20 h-20 rounded-full object-cover" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" alt="User avatar">
        <!-- The badge is 'absolute' positioned relative to the image container -->
        <div class="absolute bottom-0 right-0 h-5 w-5 bg-green-500 rounded-full border-2 border-white"></div>
      </div>
      <div>
        <h2 class="text-2xl font-bold text-slate-800">Elena Voyage</h2>
        <p class="text-slate-500">UI/UX Designer</p>
      </div>
    </div>

    <!-- Bio Section -->
    <div>
      <p class="text-slate-600">Creative designer with a passion for clean user interfaces and accessible design. Turning complex problems into beautiful, intuitive solutions.</p>
    </div>

    <!-- Hidden vs. Invisible Demonstration -->
    <div class="border-t pt-4">
      <p class="text-sm text-slate-400">Below, 'invisible' takes up space, 'hidden' does not.</p>
      <div class="flex space-x-2 mt-2">
        <div class="w-1/3 h-10 bg-sky-300 rounded">Visible</div>
        <div class="w-1/3 h-10 bg-sky-300 rounded invisible">Invisible</div>
        <div class="w-1/3 h-10 bg-sky-300 rounded">Visible</div>
        <div class="w-1/3 h-10 bg-rose-300 rounded hidden">Hidden</div>
      </div>
    </div>

  </div>

</body>
</html>