Tutorial Image

Tailwind CSS | Container

To create fixed-width Tailwind CSS container, use .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;

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Tailwind Container

Centering Container

Use additional .mx-auto class to center the container having class .container.

General Syntax

Try it now

Source Code

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

Try it now

Source Code

Try it now

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

Try it now

Source Code

Try it now

Source Code : Output

Responsive Container