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
Last Updated :
23 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...