How to Write Better Containers in Tailwind CSS

Throughout HyperUI, you will see the classes max-w-screen-xl mx-auto px-4 used to contain content. This can be observed on the website and within the components.

You might be wondering...

Why not use the .container class?

Great question.

Let's examine the .container class documentation on the Tailwind CSS website.

It provides max-width sizes at different breakpoints, which results in the content within the container adjusting to that size as the breakpoint is reached.

Container Example

If you shrink or expand the preview, you will see the content within the container snapping.

A More Fluid Container

Here's the same preview, but using the classes I mentioned at the start of this blog post.

Fluid Example

As you can see, it's more fluid. You reach the breakpoint where max-w-screen-xl is no longer applied, and then the padding is used to contain the content. To create a fully fluid container, you can remove the max-w-screen-xl class.

Let's compare the two.

Container vs Fluid Example

One argument for the .container approach is that the content is wider on larger screens. However, to address this, you can use max-w-screen-2xl instead of max-w-screen-xl.

Edit the Config and Write Less Code

One final note: if you are using the .container approach and find yourself writing container mx-auto often, you can do the following.

theme: {
  container: {
    center: true,

    // Optional
    padding: {
      DEFAULT: '1rem',
      sm: '1.5rem',
      lg: '2rem'
    }
  },
}