In Tailwind CSS, a container is used to fix the max-width of an element to match the min-width of the breakpoint. It comes very handy when content has to be displayed in a responsive manner to every breakpoint.
Breakpoints in tailwind CSS are as follows.
| 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: 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:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet">
<style>
.container {
background-color: rgb(2, 201, 118);
color: white;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2><br />
<div class="container mx-auto">
This is mx-auto class
</div>
</body>
</html>
|
Output:
mx-auto class
px-{size}: 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:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet">
<style>
.container {
background-color: rgb(2, 201, 118);
color: white;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<br />
<div class="container mx-auto px-20">
This is px-20 class
</div>
</body>
</html>
|
Output:
px-size class
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
23 Mar, 2022
Like Article
Save Article