Container

Tailwind CSS container utilities for constraining content width.

<div class="container">
  <p>Your content here</p>
</div>

Container

The default container is responsive - narrower on mobile for better readability, wider on large screens.

<div class="container">
  <p>Responsive container content</p>
</div>

Container wide

A fixed-width container that stays wide regardless of screen size.

<div class="container-wide">
  <p>Wide container content</p>
</div>

Container fluid

A full-width container with only horizontal padding.

<div class="container-fluid">
  <p>Fluid container content</p>
</div>

How it works

The container utilities are CSS-only classes that constrain content width and center it horizontally. They provide consistent horizontal padding and different max-width options.

Structure

Apply a container class to any element to constrain its content:

<div class="container">
  <h1>Page Title</h1>
  <p>Page content goes here.</p>
</div>

Class reference

All available classes for the container component.

<div class="container">...</div>
<div class="container-wide">...</div>
<div class="container-fluid">...</div>