Tailwind CSS Container
Last Updated :
13 Jan, 2025
Improve
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>
<head>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto px-4">
<h1 class="text-2xl font-bold">Welcome to Tailwind CSS</h1>
<p class="mt-4">This is a simple example demonstrating the use of the container class in Tailwind CSS.</p>
</div>
</body>
</html>
- 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:
<element class="mx-auto">...</element> <html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
</head>
<body>
<div class="bg-green-500 text-white mx-auto p-4">
This is centered using the mx-auto class.
</div>
<div class="bg-blue-500 text-white mx-auto p-4 mt-4">
Another centered section with a different background color.
</div>
</body>
</html>
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:
<element class="px-20">...</element><html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<h2 class="text-center text-green-500">GeeksforGeeks</h2>
<br />
<div class="bg-green-500 text-white mx-auto px-20">
This container has horizontal padding of 5rem (80px) on both sides.
</div>
</body>
</html>
- 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.
