Question 43147 in Html Question posted in
Some basic documentation can be found here.

Image not resizable in with tailwind CSS – Html

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.

Tags:

2

Answers


  1. 0

    The class w-108 is not a class that is included with Tailwind, the maximum default for all spacing is 96. You can add 108 as a custom size to your tailwind config, or use arbitrary values.

    https://tailwindcss.com/docs/width

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search