Tailwind CSS | Container
To create a fixed-width Tailwind CSS container, use the .container class. This fixed-width container size will change according to different screen sizes. Let us see the different container widths based on the different breakpoints.
Please keep in mind that Tailwind's container does not center itself and also does not have any built-in horizontal padding.
Please keep in mind that Tailwind's container does not center itself and also does not have any built-in horizontal padding.
Container Size
Please keep in mind that container width(max-width) will change on different breakpoints of the devices.
| Breakpoint | Properties |
|---|---|
| None | width: 100%; |
| sm (640px) | max-width: 640px; |
| md (768px) | max-width: 768px; |
| lg (1024px) | max-width: 1024px; |
| xl (1280px) | max-width: 1280px; |
| 2xl (1536px) | max-width: 1536px; |
Source Code
<div class="container">Tailwind Container</div>
Source Code : Output
Centering Container
Use additional .mx-auto class to center the container having class .container.
Source Code
<div class="container mx-auto">
<h2>Centering The Container</h2>
</div>
Source Code : Output
Centering The Container
Container: Horizontal Padding
To add horizontal padding inside the container, use .px-{size} or .py-{size} utility class.
Source Code
<div class="container mx-auto px-4 py-4">
<h2>Centering The Container & Assigning Padding</h2>
</div>
Source Code : Output
Centering The Container & Assigning Padding
Responsive Breakpoint
To create, responsive container, just add {sm | md | lf | xl | 2xl }:container class to the container base class.
General Syntax
<element class="{sm|md|lf|xl|2xl}:container {sm|md|lf|xl|2xl}:mx-auto "></element>
Source Code
<div class="md:container md:mx-auto custom--container">
<h2 class="text-center">Responsive Container</h2>
</div>
Source Code : Output
Responsive Container
Web Tutorials
