title: How to use Tailwind CSS with Next.js Image
body: <p>I am trying to use Tailwind CSS in an Next.js project but I cant't use my Tailwind classes with Next.js Image component.</p>
  <p>Here's my code:</p>
  <pre><code>&lt;Image
      src={img.img}
      alt=&quot;Picture of the author&quot;
      width=&quot;200&quot;
      height=&quot;200&quot;
      className=&quot;bg-mint text-mint fill-current&quot;
  &gt;&lt;/Image&gt;
  </code></pre>
  <p>I want to use Tailwind classes instead of the <code>height</code> and <code>width</code> property of the Next.js Image. But I can't because it throws me an error. Also, <code>unsized</code> property throws another error saying it's deprecated. Is there any solution?</p>
  <p>Here is the error if I don't use the <code>height</code> and <code>width</code> property.
  <a href="https://i.stack.imgur.com/YHoSq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YHoSq.png" alt="enter image description here" /></a></p>
  <p>When I use the <code>layout='fill'</code> property it shows only one picture. And if I use the <code>unsized</code> property, then the following error is shown.</p>
  <p><a href="https://i.stack.imgur.com/5g2LJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5g2LJ.png" alt="enter image description here" /></a></p>