Use of `container`

Use the `container` utility to wrap content within a fixed-width container.

The container utility in TailwindCSS is a key utility for responsive design, helping you create fixed-width layouts that prevent content from stretching across the entire viewport. It ensures that your content remains centered and visually appealing on all screen sizes.

Usage

To implement the container utility:

1. Basic Usage

Add the container class to a parent element to create a fixed-width container:

<div class="container">
    <!-- Your content here -->
</div>

2. Centering the container

Combine the container class with mx-auto to center the container horizontally:

<div class="container mx-auto">
    <!-- Your content here -->
</div>

3. Adding padding

Use the px-* utility to add horizontal padding within the container:

<div class="container mx-auto px-6">
    <!-- Your content here -->
</div>

How It Works

The container utility adjusts its width responsively based on TailwindCSS breakpoints. Below are the default widths at different breakpoints:

- → 100%
sm → 640px
md → 768px
lg → 1024px
xl → 1280px
2xl → 1536px

These widths ensure that your layout adapts seamlessly to different devices.

Limitations of the container Utility

1. Fixed Breakpoint Widths

The container utility has predefined fixed widths for each breakpoint. If you need custom widths that don’t align with these breakpoints, the utility may not fully meet your needs.

2. No `container-none` Utility

Unlike other utilities, there isn’t a container-none class to remove the container’s behavior on larger breakpoints. You’ll need to use a max-w-* utility for greater flexibility.

Custom container width

For more control over container widths, use a max-w-* utility. This allows you to define a custom maximum width, ideal for layouts that deviate from Tailwind’s default breakpoints.

<div class="max-w-6xl mx-auto px-6">
    <!-- Your content here -->
</div>

Using the max-w-* utilities enables you to fine-tune your layout and ensure that the container matches your design requirements.

How to Determine the Right Width

Check with Designers: Refer to your Figma, Sketch, or design system documentation. Designers often specify container widths in their designs.
Measure Directly: If no design documentation is available, inspect the layout sections in your design files and match the container width accordingly.

The container utility simplifies responsive design by centering content within fixed-width layouts. However, for greater control and custom designs, use the max-w-* utilities to fine-tune your layouts. Whether you’re working with predefined breakpoints or creating custom widths, TailwindCSS provides the flexibility to build responsive, polished layouts effortlessly.

On this page