Gotcha: `mx-auto` and Element Display Type

mx-auto for horizontal centering primarily works on elements with `display: block` (or `flex`, `grid`) and a defined width.

1. Inline Element (e.g., `<span>`):

Attempting to center an `<span>` with `mx-auto` and `w-1/3`:

Span with `mx-auto w-1/3` Another inline span

Gotcha: `mx-auto` (for horizontal centering) and `w-*` (width utilities) typically do not work as expected on `inline` elements. The span above will likely not be centered by `mx-auto` nor will its width be accurately `1/3` of its container without changing its display property. It flows with other inline content.

(Note: To center inline content, you'd typically use `text-center` on its parent block-level element.)

2. Inline Element (`<span>`) converted to `block`:

Now, converting the `<span>` to `display: block`:

Span with `block w-1/3 mx-auto`

Corrected: By adding `block` (or `inline-block` if side-by-side layout is needed with other blocks, though `mx-auto` is less common for `inline-block` horizontal centering), the `span` now behaves like a block-level element. With `block`, `w-1/3`, and `mx-auto`, it is correctly centered.

3. Default Block Element (`<div>`):

A `<div>` is `display: block` by default:

Default `div` with `w-1/2 mx-auto`

As Expected: `div` elements are block-level by default. With a defined width (`w-1/2`) and `mx-auto`, they center perfectly.