Tailwind CSS Container
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= "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:
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= "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:
px-size class
Please Login to comment...