How to Write Better Containers in Tailwind CSS

Published: Sep 21, 2022 / Updated: Aug 8, 2025

Fluid Containers in Tailwind v4

Want a container that feels modern and fluid? Use the following:

<div class="mx-auto max-w-7xl px-4">
  <!-- Content -->
</div>

Or set up a custom utility:

@utility container {
  @apply mx-auto px-4;
}

Why use this approach? The default container class in Tailwind makes use of fixed breakpoints, this can make layouts feel rigid and less natural. By using max-w-7xl and padding, your content adapts smoothly.

For a direct comparison, check out this fluid container example.