Image not resizable in with tailwind CSS

Question

I have been working on Astro JS with Tailwind CSS. When I tried to change the provide width and height there seems to be no change in the width and height.

<div>
    <Navbar></Navbar>
    <img class="ml-auto w-108" src={bgimg} alt="Stop">
    <div class="absolute top-0 left-0 flex flex-col items-start pl-10 pt-10">
        <h1 class="text-5xl font-bold text-black mt-56 ml-10">Title</h1>
        <h1 class="text-5xl font-bold text-black mt-5 ml-10 text-orange">"Sub para"</h1>
      </div>
</div>

Also saw there is not style for img tag over the project. The above code is in landing.astro file where it's resued in index.astro file. But Another image file is resizable <img class="w-20 h-20" src={logo} alt="Logo"> with this code.

Answer 1

if you want to create the desired width, just write w-[108px] and write the value inside [width]. Finally, the Tailwind compiler does the work and creates the desired class with a width of 108 pixels.

<div>
    <Navbar></Navbar>
    <img class="ml-auto w-[108px]" src={bgimg} alt="Stop">
    <div class="absolute top-0 left-0 flex flex-col items-start pl-10 pt-10">
        <h1 class="text-5xl font-bold text-black mt-56 ml-10">Title</h1>
        <h1 class="text-5xl font-bold text-black mt-5 ml-10 text-orange">"Sub para"</h1>
      </div>
</div>