Tailwind CSS | Container

To create a fixed-width Tailwind CSS container, use the .container class. Tailwind container size will change according to screen sizes. It does not center itself and also does not have any built-in horizontal padding.

Tailwind Container Width

The width of the Tailwind container changes at each breakpoint of the device. It takes 100% width in an extra-small device and then takes fixed width at higher breakpoints or screen sizes.
For example, Tailwind container size is 100% for extra-small devices, 640px width for small screens, 760px width for medium screens, 1024px width for larger screens, and so on. Let us see the Tailwind container maximum width at each breakpoint.

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;

General Syntax

      
        <element class="container"></element>      
    
Try it now

Source Code

          <div class="container">Tailwind Container</div>
        
Try it now

Source Code : Output

Tailwind Container

Centering Container

Use additional .mx-auto class to center the container in Tailwind CSS. Although container should contain .container class.

General Syntax

      
        <element class="container mx-auto"></element>      
    
Try it now

Source Code

          <div class="container mx-auto">
    <p>Centering The Container</p>
</div>
        
Try it now

Source Code : Output

Centering The Container

Container: Horizontal Padding

To add horizontal padding inside the container, use .px-{size} or .py-{size} utility class.

General Syntax

      
        <element class="container mx-auto px-4"></element>      
    
Try it now

Source Code

          <div class="container mx-auto px-4 py-4">
    <p>Centering The Container & Assigning Padding</p>
</div>
        
Try it now

Source Code : Output

Centering The Container & Assigning Padding

Responsive Breakpoint

To create, Tailwind responsive container, just add { sm | md | lg | xl | 2xl }: class to the container element.

General Syntax

      
        <element class="{sm|md|lg|xl|2xl}:container {sm|md|lg|xl|2xl}:mx-auto "></element>      
    
Try it now

Source Code

          <div class="md:container md:mx-auto custom--container">
    <h2 class="text-center">Responsive Container</h2>
</div>
        
Try it now

Source Code : Output

Responsive Container

Web Tutorials

Tailwind CSS | Container
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4