Tailwind CSS Container (original) (raw)

Last Updated : 23 Jul, 2025

**The Tailwind CSS container class is used to constrain the width of content and ensure responsive, centered layouts.

**Centers Content: Automatically centers content horizontally within the viewport.
**Responsive Widths: Sets maximum widths at different breakpoints for a consistent design across devices.
**Prevents Overstretching: Limits content width on large screens to maintain readability and visual balance. HTML `

Welcome to Tailwind CSS

This is a simple example demonstrating the use of the container class in Tailwind CSS.

The container class sets responsive fixed widths at different breakpoints, ensuring the content adapts to various screen sizes.
The mx-auto class centers the container horizontally within the viewport.

Breakpoints in Tailwind CSS

**Breakpoint	**min-width
**sm	640px
**md	768px
**lg	1024px
**xl	1280px
**2xl	1536px

Tailwind CSS does not center itself automatically and also does not contain any pre-defined padding. The following are some utility classes that make the container class stand out.

**mx-auto Class

To center the container, we use **mx-auto utility class. It adjust the margin of the container automatically so that the container appears to be in center.

**Syntax:

...

HTML `

This is centered using the mx-auto class.

Another centered section with a different background color.

**In this Example:

The first div demonstrates how mx-auto centers the content horizontally.
The second div adds variety, showing how mt-4 creates spacing between elements.

**px-{size} Class

To add padding the container, we use _px-{size} utility class. It adds horizontal padding to the container which is equal to the size mentioned.

**Syntax:

...

HTML `

GeeksforGeeks

This container has horizontal padding of 5rem (80px) on both sides.

The **px-20 class applies horizontal padding of 5rem (80px) to both the left and right sides of the container.
The **mx-auto class centers the container horizontally within its parent element.

Best Practices for Using Tailwind CSS Container

**Center Containers by Default: Configure the container to center content automatically by setting center: true in your Tailwind configuration.
**Add Horizontal Padding: Ensure consistent spacing by specifying default horizontal padding in the container configuration, e.g., padding: '2rem'.
**Customize Breakpoint Widths: Define custom maximum widths for different breakpoints to achieve the desired layout across various screen sizes.