0
635
VistasNext.js Image component Tailwind-css not working
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 :)
1 Respuestas
Responde la pregunta0
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"