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>