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:
<!DOCTYPE html> < html >
< head >
< link href =
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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:
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:
<!DOCTYPE html> < html >
< head >
< link href =
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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: