In Tailwind, a container defines different maximum widths for an element based on the current breakpoint. It's a way to contain the main content of your website in a manageable space.

You can make use of this container by using the container utility class.

Centering the Container

Many other frameworks automatically center containers. Tailwind doesn't. However, that's no problem, as you can simply add the mx-auto utility class.

What does the utility class mx-auto do?


On smaller viewports, an element styled with container will go right to the edges.

Can you think of a way to give the element a bit of horizontal space (of 4)?

<div class="text-white bg-gray-800 ">
  <p class="py-4">Hello, world!</p>
Live Preview

Hello, world!