Gotcha: `mx-auto` Requires a Defined Width

mx-auto centers block-level elements by distributing horizontal space. This only works if the element's width is less than its container's width.

1. `mx-auto` with no explicit width:

I am a `div` with `mx-auto` but no `w-*` or `max-w-*` class.

Gotcha: This `div` is a block element, so it defaults to `width: auto;`, which makes it take up the full available width of its parent. While `mx-auto` sets `margin-left: auto;` and `margin-right: auto;`, there's no leftover space to distribute, so it appears uncentered (it is, in fact, full-width).

2. `mx-auto` with `w-full`:

I am a `div` with `w-full` and `mx-auto`.

Gotcha: Similar to the above, `w-full` makes the element take all available width. `mx-auto` has no visual effect for centering because there is no horizontal space to distribute.

3. `mx-auto` with a defined width (e.g., `w-1/2`):

I am a `div` with `w-1/2` and `mx-auto`. I am correctly centered!

Correct: With a defined width less than the parent (e.g., `w-1/2`), `mx-auto` can distribute the remaining space equally on both sides.

4. `mx-auto` with `max-w-*`:

I am a `div` with `max-w-lg` and `mx-auto`. I am correctly centered and responsive!

Correct: `max-w-*` also defines a width constraint, allowing `mx-auto` to work effectively. This is often preferred for responsive designs.