Intended use-case for container

[RhysyG]

Hi there, what's the intended use-case for the container class?

Is it to wrap the whole website (ie; top app bar, menus, classic boxed website) or is to wrap the page content (top app bar, menu sit outside)?

I'm looking to wrap the page content, so I'm just trying to work if Max Width class is more appropriate.

Thanks!

[simonswiss]

Hey! 👋

The container class is really just a max-width container class with some responsive defaults, and configuration options.

Whatever you wrap it around is up to you and the needs of your project. Typically, the page content comes within it, while the header/footer span across the full width - but it's also possible to have the entire website markup wrapped within a container 👍

There is nothing wrong with using max-width instead of a container class - this is what I do personally all the time.

The container component comes with a few neat little additions though:

Responsive max widths

From the container docs page:

The container class sets the max-width of an element to match the min-width of the current breakpoint.

This is useful to incrementally widen the max-width container based on the current breakpoint you're in, instead of having to do it manually.

Config Options

Almost every time you add a max-width container, you'll also want to add some horizontal padding to avoid the content to touch the left and right edges of the viewport.

The container component allows you to define these padding values directly in your Tailwind config file, instead of applying a px-{n} class alongside the container class.

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};

Same goes with centering the container (instead of pairing with the mx-auto class):

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

If you like the idea of being able to set some default padding and have your containers respect that everywhere you use the container class, then it's a good idea to use it. Otherwise, you're fine with max-w-2xl mx-auto px-4 for example 👍

Hope it helps!

[RhysyG]

Great, thanks for that further explanation! I think I will go with max-w-X as I have various sizes I need width restricting (ie; narrow forms vs wider list items).