Tailwind CSS Container
Tailwind CSS provides a container class to constrain the width of content. It centers the content horizontally and sets maximum widths at different breakpoints, ensuring responsive design. By default, it limits content width to prevent it from stretching too wide on larger screens.
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>
Example: In tis example we ses Tailwind’s container class to create a fixed-width centered container. mx-auto class centers the container horizontally within the viewport.
<!DOCTYPE html>
<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">
w3wiki
</h2><br />
<div class="bg-green-500 text-white mx-auto p-4">
This is mx-auto class
</div>
</body>
</html>
Output:
mx-auto class
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>
Example: In this example we uses Tailwind’s container class to create a fixed-width centered container. Additionally, the px-20 utility class adds horizontal padding of size 20 to the <div>, enhancing its layout and readability.
<!DOCTYPE html>
<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">
w3wiki
</h2>
<br />
<div class="bg-green-500 text-white mx-auto px-20">
This is px-20 class
</div>
</body>
</html>
Output:
px-size class