EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Tailwind CSS Layout System: Container, Positioning & Overflow Control

Container

The Container class creates a responsive centered wrapper that automatically adjusts its maximum width based on breakpoints.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100">
  <!-- Basic container -->
  <div class="container mx-auto p-4">
    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <h2 class="text-xl font-semibold mb-4">Basic Container</h2>
      <p class="text-gray-600">The container automatically adjusts its max-width based on screen width</p>
    </div>
  </div>

  <!-- Full-width background + contained content -->
  <div class="bg-blue-600 py-12">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl font-bold text-white mb-4">Full-Width Background + Contained Content</h2>
      <p class="text-blue-100">Background stretches full width, content stays centered</p>
    </div>
  </div>

  <!-- Container widths at different breakpoints -->
  <div class="container mx-auto p-4 mt-6">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Container Breakpoint Reference</h3>
      <div class="space-y-2 text-sm">
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">sm (≥640px)</span>
          <span class="font-mono">max-width: 640px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">md (≥768px)</span>
          <span class="font-mono">max-width: 768px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">lg (≥1024px)</span>
          <span class="font-mono">max-width: 1024px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">xl (≥1280px)</span>
          <span class="font-mono">max-width: 1280px</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-600">2xl (≥1536px)</span>
          <span class="font-mono">max-width: 1536px</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Custom container width -->
  <div class="max-w-2xl mx-auto p-4 mt-6">
    <div class="bg-green-50 border border-green-200 rounded-lg p-6">
      <h3 class="font-semibold text-green-800 mb-2">Custom Max Width</h3>
      <p class="text-green-600">Using max-w-2xl (672px) instead of container</p>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Container breakpoint reference:

Breakpoint Min Width Container Max Width
Default - 100%
sm 640px 640px
md 768px 768px
lg 1024px 1024px
xl 1280px 1280px
2xl 1536px 1536px

Traditional CSS vs Tailwind The traditional approach requires manually setting max-width and media queries for responsive containers, while Tailwind's container class handles all breakpoints automatically.

💡 Tip: container needs mx-auto for horizontal centering. You can enable center: true in your config to auto-center containers.

Position

Tailwind provides a complete positioning system: static, relative, absolute, fixed, sticky.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- relative + absolute -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">relative + absolute Positioning</h3>
      <div class="relative h-48 bg-gray-200 rounded">
        <div class="absolute top-4 left-4 bg-blue-500 text-white px-4 py-2 rounded">
          top-4 left-4
        </div>
        <div class="absolute top-4 right-4 bg-green-500 text-white px-4 py-2 rounded">
          top-4 right-4
        </div>
        <div class="absolute bottom-4 left-4 bg-purple-500 text-white px-4 py-2 rounded">
          bottom-4 left-4
        </div>
        <div class="absolute bottom-4 right-4 bg-orange-500 text-white px-4 py-2 rounded">
          bottom-4 right-4
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
          <span class="bg-red-500 text-white px-4 py-2 rounded">inset-0 centered</span>
        </div>
      </div>
    </div>

    <!-- sticky positioning -->
    <div class="bg-white rounded-lg shadow">
      <div class="sticky top-0 bg-blue-600 text-white p-4 rounded-t-lg z-10">
        <h3 class="font-semibold">Sticky Positioning - Scroll down to see the effect</h3>
      </div>
      <div class="p-6 space-y-4">
        <p class="text-gray-600">Scroll down and the header will stick to the top.</p>
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">
          <span class="text-gray-400">Scroll area</span>
        </div>
        <p class="text-gray-600">Keep scrolling...</p>
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">
          <span class="text-gray-400">More content</span>
        </div>
      </div>
    </div>

    <!-- fixed positioning example -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Fixed Positioning</h3>
      <p class="text-gray-600 mb-4">
        Fixed positioning is relative to the viewport, commonly used for navbars, back-to-top buttons, etc.
        Example code:
      </p>
      <pre class="bg-gray-100 p-4 rounded text-sm">
&lt;nav class="fixed top-0 left-0 right-0 bg-white shadow"&gt;
  Fixed navbar
&lt;/nav&gt;

&lt;button class="fixed bottom-8 right-8 bg-blue-500 text-white p-3 rounded-full"&gt;
  Back to top
&lt;/button&gt;</pre>
    </div>

    <!-- Position offset properties -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Position Offset Properties</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">top-0</code>
          <span class="text-gray-500 text-sm ml-2">top: 0px</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">right-4</code>
          <span class="text-gray-500 text-sm ml-2">right: 16px</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">bottom-full</code>
          <span class="text-gray-500 text-sm ml-2">bottom: 100%</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">left-1/2</code>
          <span class="text-gray-500 text-sm ml-2">left: 50%</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Position class reference:

Class CSS Value Description
static position: static Default positioning, no offset
relative position: relative Relative positioning, preserves original space
absolute position: absolute Absolute positioning, relative to nearest positioned ancestor
fixed position: fixed Fixed positioning, relative to viewport
sticky position: sticky Sticky positioning, fixed on scroll

Traditional CSS vs Tailwind The traditional approach requires setting position and offset values in CSS, while Tailwind uses classes like relative, top-4, left-4 to declare them directly in HTML.

Z-index Stacking Order

Z-index controls the stacking order of positioned elements, determining which elements appear in front.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Z-index Stacking Order Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Stacking example -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Z-index Stacking Effect</h3>
      <div class="relative h-64">
        <div class="absolute left-8 top-8 w-48 h-32 bg-red-400 rounded-lg shadow-lg z-10 flex items-center justify-center">
          <span class="text-white font-bold">z-10</span>
        </div>
        <div class="absolute left-16 top-16 w-48 h-32 bg-blue-400 rounded-lg shadow-lg z-20 flex items-center justify-center">
          <span class="text-white font-bold">z-20</span>
        </div>
        <div class="absolute left-24 top-24 w-48 h-32 bg-green-400 rounded-lg shadow-lg z-30 flex items-center justify-center">
          <span class="text-white font-bold">z-30</span>
        </div>
        <div class="absolute left-32 top-32 w-48 h-32 bg-purple-400 rounded-lg shadow-lg z-40 flex items-center justify-center">
          <span class="text-white font-bold">z-40</span>
        </div>
      </div>
    </div>

    <!-- Practical applications -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Use Cases</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <code class="w-24">z-0</code>
          <span class="text-gray-600">Default layer</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-10</code>
          <span class="text-gray-600">Cards, content areas</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-20</code>
          <span class="text-gray-600">Dropdowns, sidebars</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-30</code>
          <span class="text-gray-600">Sticky navbars</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-40</code>
          <span class="text-gray-600">Modal overlays</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-50</code>
          <span class="text-gray-600">Modals, popups</span>
        </div>
      </div>
    </div>

    <!-- Negative z-index -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Negative Z-index</h3>
      <div class="relative h-32">
        <div class="absolute inset-0 bg-blue-100 rounded flex items-center justify-center">
          <span class="text-blue-600">z-0 background layer</span>
        </div>
        <div class="absolute left-4 top-4 w-32 h-24 bg-red-400 rounded -z-10 flex items-center justify-center">
          <span class="text-white">-z-10</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting specific z-index values in CSS, while Tailwind provides preset levels from z-0 to z-50 that cover most use cases.

⚠️ Note: z-index only affects positioned elements (relative, absolute, fixed, sticky). Use z-auto to reset to default behavior.

Overflow Control

Overflow controls how content is displayed when it exceeds its container.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Overflow Control Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- overflow-auto -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-auto</h3>
      <p class="text-gray-600 mb-4">Shows scrollbars when content overflows</p>
      <div class="overflow-auto h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">This is a long piece of content...</p>
        <p class="mb-4">Demonstrating the overflow-auto effect.</p>
        <p class="mb-4">When content exceeds the container height, scrollbars appear automatically.</p>
        <p class="mb-4">Users can scroll to view all content.</p>
        <p class="mb-4">Adding more content...</p>
        <p class="mb-4">Even more text content.</p>
        <p>Last paragraph of content.</p>
      </div>
    </div>

    <!-- overflow-hidden -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-hidden</h3>
      <p class="text-gray-600 mb-4">Hides overflowing content</p>
      <div class="overflow-hidden h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">This is a long piece of content...</p>
        <p class="mb-4">Demonstrating the overflow-hidden effect.</p>
        <p class="mb-4">Content that exceeds the container is hidden.</p>
        <p class="mb-4">Users cannot scroll to see the hidden content.</p>
        <p class="mb-4">This content is invisible...</p>
        <p class="mb-4">This is also invisible...</p>
        <p>This is also invisible...</p>
      </div>
    </div>

    <!-- overflow-scroll -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-scroll</h3>
      <p class="text-gray-600 mb-4">Always shows scrollbars</p>
      <div class="overflow-scroll h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">This content is short...</p>
        <p>But scrollbars are still visible.</p>
      </div>
    </div>

    <!-- Horizontal overflow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Horizontal Overflow Control</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">overflow-x-auto (horizontal scroll)</p>
          <div class="overflow-x-auto border-2 border-gray-300 rounded p-4">
            <div class="flex gap-4 w-[800px]">
              <div class="bg-blue-200 p-4 rounded flex-shrink-0 w-48">Item 1</div>
              <div class="bg-blue-300 p-4 rounded flex-shrink-0 w-48">Item 2</div>
              <div class="bg-blue-400 p-4 rounded flex-shrink-0 w-48 text-white">Item 3</div>
              <div class="bg-blue-500 p-4 rounded flex-shrink-0 w-48 text-white">Item 4</div>
            </div>
          </div>
        </div>

        <div>
          <p class="text-sm text-gray-600 mb-2">overflow-x-hidden (hide horizontal overflow)</p>
          <div class="overflow-x-hidden border-2 border-gray-300 rounded p-4">
            <div class="flex gap-4 w-[800px]">
              <div class="bg-green-200 p-4 rounded flex-shrink-0 w-48">Item 1</div>
              <div class="bg-green-300 p-4 rounded flex-shrink-0 w-48">Item 2</div>
              <div class="bg-green-400 p-4 rounded flex-shrink-0 w-48 text-white">Item 3</div>
              <div class="bg-green-500 p-4 rounded flex-shrink-0 w-48 text-white">Item 4</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- text-overflow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Text Overflow</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">truncate (single-line ellipsis)</p>
          <p class="truncate bg-gray-100 p-3 rounded">
            This is a long text content. The truncate class shows an ellipsis when single-line text overflows, hiding content beyond the container width with ...
          </p>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">text-ellipsis + overflow-hidden</p>
          <p class="text-ellipsis overflow-hidden whitespace-nowrap bg-gray-100 p-3 rounded">
            This is another way to achieve ellipsis, requiring the combination of text-ellipsis, overflow-hidden, and whitespace-nowrap
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Overflow class reference:

Class CSS Value Description
overflow-auto overflow: auto Show scrollbars when needed
overflow-hidden overflow: hidden Hide overflowing content
overflow-visible overflow: visible Show overflowing content (default)
overflow-scroll overflow: scroll Always show scrollbars
overflow-x-auto overflow-x: auto Auto horizontal scroll
overflow-y-auto overflow-y: auto Auto vertical scroll

Traditional CSS vs Tailwind The traditional approach requires setting overflow-x and overflow-y properties separately for different directions, while Tailwind provides a unified overflow- prefix.

Float & Clear

Float is used for floating element layout, and Clear controls floating behavior.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Float Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Basic float -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Float</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-left w-32 h-32 bg-blue-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">float-left</span>
        </div>
        <p class="text-gray-700 leading-relaxed">
          This text wraps around the floating element. float-left makes the element float to the left,
          and subsequent content flows around it. This is the classic text-wrapping-around-image effect.
          Adding more text to demonstrate the wrapping effect...
        </p>
      </div>
    </div>

    <!-- Right float -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Right Float</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-right w-32 h-32 bg-green-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">float-right</span>
        </div>
        <p class="text-gray-700 leading-relaxed">
          float-right makes the element float to the right. Text wraps around the floating element from the left.
          This layout pattern was common in traditional web design, but Flexbox or Grid are now preferred.
          Adding more text to demonstrate the wrapping effect...
        </p>
      </div>
    </div>

    <!-- Clear control -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Clear Control</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-left w-24 h-24 bg-blue-400 rounded m-2 flex items-center justify-center">
          <span class="text-white text-sm">Float</span>
        </div>
        <div class="float-left w-24 h-24 bg-blue-500 rounded m-2 flex items-center justify-center">
          <span class="text-white text-sm">Float</span>
        </div>
        <div class="clear-both bg-yellow-200 p-4 rounded mt-4">
          <p>clear-both: clears floats on both sides, ensuring this starts on a new line</p>
        </div>
      </div>
    </div>

    <!-- clearfix -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Clearfix (Clearing Floats)</h3>
      <div class="bg-gray-100 p-4 rounded overflow-hidden">
        <div class="float-left w-32 h-32 bg-purple-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">Floating element</span>
        </div>
        <div class="float-right w-32 h-32 bg-purple-500 rounded m-4 flex items-center justify-center">
          <span class="text-white">Floating element</span>
        </div>
        <p class="text-gray-600">
          Using overflow-hidden on the parent element to clear floats
        </p>
      </div>
    </div>

    <!-- Modern alternative -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Modern Alternative (Recommended)</h3>
      <p class="text-gray-600 mb-4">
        For layout needs, Flexbox or Grid is recommended over Float:
      </p>
      <div class="flex gap-4">
        <div class="w-32 h-32 bg-blue-400 rounded flex items-center justify-center">
          <span class="text-white">Flex 1</span>
        </div>
        <div class="w-32 h-32 bg-blue-500 rounded flex items-center justify-center">
          <span class="text-white">Flex 2</span>
        </div>
        <div class="w-32 h-32 bg-blue-600 rounded flex items-center justify-center">
          <span class="text-white">Flex 3</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Float/Clear class reference:

Class CSS Value Description
float-left float: left Float to the left
float-right float: right Float to the right
float-none float: none No float
clear-left clear: left Clear left float
clear-right clear: right Clear right float
clear-both clear: both Clear floats on both sides
clear-none clear: none No clear

Traditional CSS vs Tailwind The traditional approach requires writing a .clearfix class with an ::after pseudo-element, while Tailwind can clear floats directly using overflow-hidden on the parent element.

⚠️ Note: Float layout has largely been replaced by Flexbox and Grid. Float is now primarily used for specific scenarios like wrapping text around images.

Comprehensive Layout Example

Combining all the concepts above, let's create a complete page layout.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Comprehensive Layout Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100">
  <!-- Fixed navbar -->
  <nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-xl font-bold text-gray-800">My Website</h1>
      <div class="space-x-4">
        <a href="#" class="text-gray-600 hover:text-blue-600">Home</a>
        <a href="#" class="text-gray-600 hover:text-blue-600">About</a>
        <a href="#" class="text-gray-600 hover:text-blue-600">Contact</a>
      </div>
    </div>
  </nav>

  <!-- Main content area -->
  <div class="pt-16">
    <!-- Hero section -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-4xl font-bold mb-4">Welcome to My Website</h2>
        <p class="text-xl opacity-90">A modern layout built with Tailwind CSS</p>
      </div>
    </div>

    <!-- Content cards -->
    <div class="container mx-auto px-4 py-12">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">Card Title</h3>
            <p class="text-gray-600 text-sm">Card description...</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-green-400 to-green-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">Card Title</h3>
            <p class="text-gray-600 text-sm">Card description...</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-purple-400 to-purple-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">Card Title</h3>
            <p class="text-gray-600 text-sm">Card description...</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Sticky sidebar layout -->
    <div class="container mx-auto px-4 pb-12">
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- Main content -->
        <div class="flex-1 bg-white rounded-lg shadow p-6">
          <h3 class="text-xl font-semibold mb-4">Main Content Area</h3>
          <div class="space-y-4">
            <p class="text-gray-600">This is the main content area, taking up most of the space.</p>
            <div class="h-96 bg-gray-100 rounded"></div>
          </div>
        </div>
        
        <!-- Sidebar -->
        <aside class="lg:w-64 lg:sticky lg:top-20 lg:self-start">
          <div class="bg-white rounded-lg shadow p-6">
            <h4 class="font-semibold mb-4">Sidebar</h4>
            <p class="text-gray-600 text-sm">Uses sticky positioning to stay fixed at the top while scrolling.</p>
          </div>
        </aside>
      </div>
    </div>
  </div>

  <!-- Back to top button -->
  <button class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg hover:bg-blue-700 transition-colors z-40">
    ↑
  </button>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires writing extensive CSS for fixed navigation, responsive grids, sticky sidebars, and other layouts, while Tailwind accomplishes everything with utility classes directly in HTML, reducing code by over 70%.

❓ FAQ

Q What's the difference between container and max-w-2xl?
A container is responsive and automatically adjusts its max-width at different breakpoints. max-w-2xl is a fixed 672px max-width. If you need a fixed width, the latter is more appropriate.
Q Why isn't sticky positioning working?
A Sticky requires the parent element to have a defined height and allow scrolling. A common issue is the parent element having overflow: hidden, which prevents sticky from working. Make sure the parent doesn't restrict overflow.
Q When should I use overflow-hidden to clear floats?
A Use it when a parent element contains floating children and you need the parent's height to encompass its children. For modern layouts, Flexbox or Grid is recommended over Float.
Q What's the convention for z-index values?
A Tailwind provides z-0 through z-50. A recommended layering scheme: z-10 content, z-20 navigation, z-30 sticky nav, z-40 overlays, z-50 modals. Avoid using excessively large values.

📖 Summary

📝 Exercises

  1. ⭐ Create a centered page using container and mx-auto with a fixed-width card grid layout

  2. ⭐⭐ Create a two-column layout page with a fixed navbar (fixed) and a sticky sidebar (sticky)

  3. ⭐⭐⭐ Create a complete Modal component using fixed positioning, z-50 stacking level, overflow-hidden background overlay, with responsive adaptation

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏