How to center a React Flowbite Modal after resizing width?

Question

I have a Flowbite React Modal that looks something like this:

<Modal
  dismissible
  className="bg-neutral-950/70 backdrop-blur-sm"
  id="my-modal"
  show={showMyModal}
  tabIndex={-1}
  theme={{
    content: {
      base: 'bg-transparent',
      inner: 'bg-transparent',
    },
  }}
  onClose={() => setShowMyModal(false)}
  onFocus={handleOnFocus}
>
  <div id="A" className="relative p-6 w-full max-h-full bg-neutral-950 border border-neutral-700 rounded-lg shadow">
    <div className="mb-6">
      <h3 className="text-xl font-semibold text-neutral-100">
        Some Header
      </h3>
    </div>
    <div className="mb-6">
      <p className="text-sm text-neutral-100">
        Some extended block of paragraph text.
      </p>
    </div>
  </div>
</Modal>

How can I change the width of the Modal while also keeping it centered on the page? Preferably only by adding tailwind css classes.

The first thing I tried was adding a tailwind class to the div with id="A", e.g. w-3/4. This resized the modal width as expected, but it was no longer centered. I then tried a combination of adding various tailwind classes, adding divs, etc.

Ultimately, I got it working with... (see solution)

Answer 1

Ultimately, I got it working with adding a width class (e.g. w-3/4) to the base prop of the content prop of the theme prop to the Modal component, i.e.:

<Modal
  {/* other props omitted for clarity */}
  theme={{
    content: {
      base: 'bg-transparent w-3/4',
      inner: 'bg-transparent',
  },
>