How to Write Better Containers in Tailwind CSS

Updated: 08/09/2025
Published: 09/20/2022

Fluid Containers in Tailwind v4

Want a container that feels modern and fluid? Use:

<div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
  <!-- Content -->
</div>

Or set up a custom utility:

@utility container {
  @apply mx-auto px-4 sm:px-6 lg:px-8;
}

Why use this approach? The default .container class in Tailwind sets fixed widths at breakpoints, which can make layouts feel rigid and less natural. By using max-w-screen-xl and padding, your content adapts smoothly to any screen size and always stays visually balanced.

For a direct comparison, check out this example: Fluid Container Example