使用Daisy UI卡片时Tailwind max-w-[number]超出max-w-52失效问题

技术栈：Svelte 5 / SvelteKit / Tailwind CSS / Daisy UI

我在Svelte组件里用Daisy UI的卡片时遇到个问题：用Tailwind的max-w-[数值]类设置卡片最大宽度，只要超过max-w-52，卡片宽度就会毫无征兆地骤缩。目前只能用固定宽度类w-[xxrem]实现宽卡片效果，但这样宽度没法自适应。我没有任何可能引发这个问题的全局CSS或自定义Tailwind配置，想问这是不是Daisy UI卡片的固有限制？

GameForm组件 #

<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>

内容的提问来源于stack exchange，提问作者NickyLarson