Next.js Image component Tailwind-css not working

Question

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

<div className=" flex flex-col items-center p-5 sm:justify-center sm:pt-9 sm:flex-row text-justify relative">
  <div className="border-solid border-2 border-black rounded-full basis-[13%] sm:mr-10">
    <Image
      src={Me}
      alt="Profile"
      width={400}
      height={400}
      className="rounded-full"
      objectFit="cover"
    />
  </div>
  <p className="text-sm sm:basis-2/4 m-4">
    {/* {
            Text goes here, this works fine, this isn't the problem its just part of the parent div :)
          } */}
  </p>
</div>;

for some reason this gives me this

where for some reason the image gets a small padding between the border

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: Next Image not taking class properties How to use Tailwind CSS with Next.js Image

Thank you :)

Please Provide more code (entire next.js page with imports). What is the image format? — MarioG8, Jan 05 '22 at 16:55

MarioG8 · Accepted Answer · 2022-01-05T19:36:47.940

This is my solution proposition, with small improvements. I hope You will be content ;-) Key to the example is the use of layout="responsive" (in next.js Image component) and custom min-width tailwindcss class on the parent div.

example.js (ExamplePage)

import Image from "next/image";

function ExamplePage() {
  return (
    <div className="flex flex-col items-center p-5 sm:justify-center sm:pt-9 sm:flex-row text-justify relative">
      <div className="border-solid border-2 border-black rounded-full basis-[13%] sm:mr-10 min-w-1/5">
        <Image
          src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=80"
          alt="Profile"
          width={400}
          height={400}
          layout="responsive"
          className="rounded-full"
          objectFit="cover"
        />
      </div>
      <p className="text-xs md:text-xl sm:basis-2/4 m-4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, qui magni
        debitis, omnis quo dolorum nihil labore vel, nisi deserunt
        necessitatibus numquam. Optio ex incidunt quis modi deserunt architecto
        ab neque officiis possimus, doloribus odio vero accusantium, magnam
        dolorum natus? Inventore tempora veritatis eaque nesciunt possimus cum
        porro consequuntur veniam! ab neque officiis possimus, doloribus odio
        vero accusantium, magnam dolorum natus? Inventore tempora veritatis
        eaque nesciunt possimus cum porro consequuntur veniam!
      </p>
    </div>
  );
}

export default ExamplePage;

tailwind.config.js I've added custom min-width more about it here.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    minWidth: { "1/5": "20%" },

    extend: {},
  },
  plugins: [],
};

Output - Image without any extra padding "between the border"

To served my image I had to added to my next.config.js file.

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ["images.unsplash.com"],
  },
};

Tested with: "next": "12.0.7", "react": "17.0.2", "tailwindcss": "^3.0.5"

This saved me, thank you so much this solution works, approved! — Guilherme Féria, Jan 06 '22 at 11:38

Next.js Image component Tailwind-css not working

1 Answers1