In this sample, I create an <img> (whose width is 245px) inside a flexbox, and set its width via CSS to 20rem (320px, in this case) but it seems not working.
Is there any way to set the <img> width to 20rem?
<script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto my-4">
<div class="border border-black-500 flex gap-4 p-4 w-full">
<img class="basis-[20rem] border border-black-500 grow max-w-none rounded w-[20rem]" src="https://i.imgur.com/CCAN5zY.png"/>
<div class="border border-black-500 p-4 rounded w-full">some words</div>
</div>
</div>Flex items shrink by default. To prevent an item shrinking, in CSS you would set flex-shrink: 0 ... in Tailwind you would use shrink-0.
<script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto my-4">
<div class="border border-black-500 flex gap-4 p-4 w-full">
<img class="border border-black-500 rounded w-[20rem] shrink-0" src="https://i.imgur.com/CCAN5zY.png"/>
<div class="border border-black-500 rounded grow p-4">some words</div>
</div>
</div>