Tailwind CSS 4.1 Three Column Full Screen Layout

To achieve a three-column layout that fills the entire page height, we need to ensure both the outer container and each column have 100% height. In Tailwind CSS 4.1, follow these steps:

  1. Set the root elements (html, body) to height: 100% to allow subsequent elements to expand based on viewport height.
  2. Use flexbox layout with the outer container (flex container) set to viewport height (h-screen).
  3. Configure three flex columns: fixed-width left/right columns, a fluid center column, and automatic height stretching (default align-items: stretch ensures equal height).

Core Code:

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Full Height Three Columns</title>
  <script src="https://cdn.tailwindcss.com/4.1.0"></script>
</head>
<body class="h-full">
  <!-- Outer flex container with viewport height -->
  <div class="flex h-screen">
    <!-- Left fixed column -->
    <div class="w-64 bg-gray-200 shrink-0">
      Fixed width (256px)
    </div>
    
    <!-- Fluid center column -->
    <div class="flex-1 bg-gray-300">
      Fluid width
    </div>
    
    <!-- Right fixed column -->
    <div class="w-64 bg-gray-200 shrink-0">
      Fixed width (256px)
    </div>
  </div>
</body>
</html>

Implementation Principles:

  1. ​​Set root elements to 100% height​​:
    h-full class (equivalent to height: 100%) makes the body fill the viewport height.
  2. ​​Outer container settings​​:
    • flex: Enables flexbox layout
    • h-screen: Sets container height to viewport height (100vh)
  3. ​​Column height behavior​​:
    Flexbox's default align-items: stretch automatically expands column heights to match the container's height (full screen). No manual height required.
  4. ​​Fixed-width columns​​:
    • w-64: Fixed width of 256px
    • shrink-0: Prevents column shrinkage when space is limited
  5. ​​Fluid center column​​:
    flex-1: Occupies all remaining available space

Important Notes: