Tailwind max-w-[number] not working past a certain point

Question

My stack is Svelte 5 / Sveltekit / Tailwind / Daisy UI

I have a svelte component that uses a Daisy UI card and I am unable to get tailwind max-w-[number] class to work past a certain point to increase the width of the card. Once I go over max-w-52, the width of the card shrinks dramatically for no apparent reason.

The only way I have managed to expand the width beyond that is by using w-[rem[number]] instead, which always works. However that causes the width to be fixed.

I have no global css or custom Tailwind that could be causing this issue.

Is this a limitation of Daisy UI cards?

GameForm component:

<div class="w-full flex justify-center">
    <div class="card bg-base-200 shadow-xl max-w-60">
        <div class="card-body p-4 pb-2 pt-1">
            <input type="hidden" name="games[{index}].index" value={index} />
            <CollapsedForm {index} bind:game />
            <OptionalFormInfo {index} bind:game />
        </div>
    </div>
</div>

CollapsedForm:

<div class="text-xl font-medium flex justify-evenly gap-4 w-full">
    <TextInput
        name="games[{index}].name"
        label="Game Name"
        type="text"
        placeholder="Enter game title"
        bind:value={game.name}
    />
    <SelectInput
        name="games[{index}].condition"
        label="Condition"
        options={Object.values(GamesConditionOptions)}
        bind:value={game.condition}
    />
    <CurrencyInput name="games[{index}].price" label="Price" value={game.price} required={true} />
    <CurrencyToggleInput
        name="games[{index}].postage_price"
        {index}
        label="Postage"
        bind:delivery={game.delivery}
        bind:postage_price={game.postage_price}
    />
    <ToggleDetailsButton {index} />
</div>

TextInput:

<div class="form-control w-full">
    <label class="label" for={name}>
        <span class="label-text">{label}</span>
    </label>
    {#if textarea}
        <textarea {name} {placeholder} bind:value class="textarea textarea-bordered w-full" rows="3"
        ></textarea>
    {:else}
        <input {type} {name} {placeholder} bind:value class="input input-bordered w-full" />
    {/if}
</div>

Answer 1

You could still apply width without having a "fixed" width. For example, you could set width to a percentage like 100% via w-full:

<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />

<div class="w-full flex justify-center">
  <div class="card bg-base-200 shadow-xl w-full">
    <div class="card-body p-4 pb-2 pt-1">
      <input type="hidden" name="games[{index}].index" value={index} />
      <div class="text-xl font-medium flex justify-evenly gap-4 w-full">
        <div class="form-control w-full">
          <label class="label" for="games[{index}].name">
            <span class="label-text">Game Name</span>
          </label>
          <input type="text" name="games[{index}].name" placeholder="Enter game title" class="input input-bordered w-full" />
        </div>
          <SelectInput
              name="games[{index}].condition"
              label="Condition"
              options={Object.values(GamesConditionOptions)}
              bind:value={game.condition}
          >SelectInput</SelectInput>
          <CurrencyInput name="games[{index}].price" label="Price" value={game.price} required={true}>
            CurrencyInput
          </CurrencyInput>
          <CurrencyToggleInput
              name="games[{index}].postage_price"
              {index}
              label="Postage"
              bind:delivery={game.delivery}
              bind:postage_price={game.postage_price}
          >
            CurrencyToggleInput
          </CurrencyToggleInput>
          <ToggleDetailsButton {index}>
            ToggleDetailsButton
          </ToggleDetailsButton>
      </div>
      <OptionalFormInfo {index} bind:game>OptionalFormInfo</OptionalFormInfo>
    </div>
  </div>
</div>

Or you could leave out any widths all together to have the element be its "natural" width:

<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />

<div class="w-full flex justify-center">
  <div class="card bg-base-200 shadow-xl">
    <div class="card-body p-4 pb-2 pt-1">
      <input type="hidden" name="games[{index}].index" value={index} />
      <div class="text-xl font-medium flex justify-evenly gap-4 w-full">
        <div class="form-control w-full">
          <label class="label" for="games[{index}].name">
            <span class="label-text">Game Name</span>
          </label>
          <input type="text" name="games[{index}].name" placeholder="Enter game title" class="input input-bordered w-full" />
        </div>
          <SelectInput
              name="games[{index}].condition"
              label="Condition"
              options={Object.values(GamesConditionOptions)}
              bind:value={game.condition}
          >SelectInput</SelectInput>
          <CurrencyInput name="games[{index}].price" label="Price" value={game.price} required={true}>
            CurrencyInput
          </CurrencyInput>
          <CurrencyToggleInput
              name="games[{index}].postage_price"
              {index}
              label="Postage"
              bind:delivery={game.delivery}
              bind:postage_price={game.postage_price}
          >
            CurrencyToggleInput
          </CurrencyToggleInput>
          <ToggleDetailsButton {index}>
            ToggleDetailsButton
          </ToggleDetailsButton>
      </div>
      <OptionalFormInfo {index} bind:game>OptionalFormInfo</OptionalFormInfo>
    </div>
  </div>
</div>