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 per the following:
| Breakpoint | min-width |
| sm | 640px |
| ld | 768px |
| mg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
Tailwind CSS Container : 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:#CF2E2E;
color: white;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:#0170B9">
<b>HOW2TRICK</b>
</h2><br />
<div class="container mx-auto">
This is mx-auto class
</div>
</body>
</html>Output:
HOW2TRICK
This is mx-auto class