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>