title: Next.js Image component Tailwind-css not working
body: <p>So recently I've been trying to convert a react project to next and how I have to use the next/Image component which is kinda broken</p>
  <pre><code>&lt;div className=&quot; flex flex-col items-center p-5 sm:justify-center sm:pt-9 sm:flex-row text-justify relative&quot;&gt;
    &lt;div className=&quot;border-solid border-2 border-black rounded-full basis-[13%] sm:mr-10&quot;&gt;
      &lt;Image
        src={Me}
        alt=&quot;Profile&quot;
        width={400}
        height={400}
        className=&quot;rounded-full&quot;
        objectFit=&quot;cover&quot;
      /&gt;
    &lt;/div&gt;
    &lt;p className=&quot;text-sm sm:basis-2/4 m-4&quot;&gt;
      {/* {
              Text goes here, this works fine, this isn't the problem its just part of the parent div :)
            } */}
    &lt;/p&gt;
  &lt;/div&gt;;
  </code></pre>
  <p>for some reason this gives me this
  <a href="https://i.stack.imgur.com/fRGbI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fRGbI.png" alt="enter image description here" /></a></p>
  <p>where for some reason the image gets a small padding between the border</p>
  <p><a href="https://i.stack.imgur.com/Kx5KR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kx5KR.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/Lulmg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lulmg.png" alt="enter image description here" /></a></p>
  <p>I've checked and there is no border this is just nextjs's image component broken. Please be help full I've tried these solutions and none of these worked:
  <a href="https://stackoverflow.com/questions/65527407/next-image-not-taking-class-properties">Next Image not taking class properties</a>
  <a href="https://stackoverflow.com/questions/64846858/how-to-use-tailwind-css-with-next-js-image">How to use Tailwind CSS with Next.js Image</a></p>
  <p><strong>Thank you :)</strong></p>