Tailwind CSS Container
In Tailwind CSS, a compartment is utilized to fix the maximum width (max-width) of a component to match the min-width of the breakpoint. It comes exceptionally convenient when content must be shown in a responsive way to each breakpoint.
Breakpoints in tailwind CSS are as per the following:
| Breakpoint | min-width |
| sm | 640px |
| ld | 768px |
| mg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
Tailwind CSS doesn't focus itself naturally and doesn't contain any pre-characterized padding. Coming up next are a few utility classes that make the container class stick out.
- mx-auto
We use the mx-auto utility class to center the container. It changes the margin of the container consequently with the goal that the container has all the earmarks of being in the center.
Syntax:
<element class="mx-auto">...</element>
Code Example
Code is as follows:
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
<style>
.container {
background-color: rgb(101, 100, 100);
color: white;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:red">
Tutorial and Example
</h2> <br />
<div class="container mx-auto">
This is mx-auto class used here
</div>
</body>
</html>
Output
The output for the above code is:
- px-{size}
To add padding the container, we use px-{size} utility class. It adds horizontal padding to the container which is equivalent to the size reference.
Syntax:
<element class="px-20">...</element>
Code Example
Code is as follows:
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
<style>
.container {
background-color: rgb(200, 20, 118);
color: white;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:purple">
Tutorial and Example
</h2>
<br />
<div class="container mx-auto px-20">
This is px-20 class used here
</div>
</body>
</html>
Output
The output for the above code is:
