If you've used Bootstrap before, you probably remember that there containers are necessary for the proper functioning of the grid system.

So it can be a bit confusing that in Tailwind containers don't have such an important function, and grid can do just fine without them.

However, this does not mean that containers are useless in Tailwind. Quite the opposite. But they just play a different role.

Let's have a look at them.

How does a container work in Tailwind CSS?

In Tailwind we use containers to set a maximum width for a content we want to place inside of the container.

In other words - we use containers so that a given element / content placed in this container does not extend to the full width of the screen.

Have a look at the example below.

Let's add a long text paragraph to the <main> section of our project. In addition, let's add the .bg-red-200 class to it to be able to clearly see how wide this paragraph extends.

The paragraph will span the full width of the page. This is often not a desirable situation, which is why we have containers at our disposal.

So what happens if we add an element with class .container to the project and put our paragraph in it?

Well, actually the paragraph won't be full-width anymore, but that's not quite what we wanted. A strange-looking gap appeared on the right side.

This is because, unlike, for example containers in Bootstrap, containers in Tailwind do not auto-center.

To get the centering effect, we need to add the .mx-auto class to the .container, which will divide the left and right margins of the .container equally.

And now, by dividing the left and right margins equally (thanks to .mx-auto class), our container has been centered.

Alright, now that we know how containers work, let's use them for something practical.

But first, let's remove this sample container paragraph from the <main> section, as it was for demonstration purposes only.

Add container to the Navbar

Currently, the elements in our Navbar are stretched to full width and touch the left and right edges of the browser window.

It would be nice if we could give them some space on the sides and center them.

This is the perfect opportunity to make use of the container.

Inside of the <nav> element, find the <div> element that is its direct child. There will already be a few other classes there, but that's okay.

Add .container and .mx-auto classes there:

And now we have proper margins on the right and left side of the Navbar.

But there is another problem - when we reduce the size of the browser window, the margins remain the same size. On the big screen it looks correct, but on the mobile view it definitely shouldn't look like this.

Add a breakpoint to the .container

Fortunately, it's very easy to fix. It is enough to add a breakpoint lg before the .container class (similarly as we did with the grid) and thanks to this the margins will be added only on screens above 1024px.

And now it's perfect.

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.