Tailwind override NextJs Image component with global height: 'auto' property <Image />

[GabVlado]

Tailwind override NextJs Image component with global height: 'auto' property

My package.json

{
"name": "pokestatic",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@types/node": "18.14.4",
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
"axios": "^1.3.4",
"eslint": "8.35.0",
"eslint-config-next": "13.2.3",
"next": "13.2.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "4.9.5"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.7"
}
}

Example, I have a component and height: 'auto' overrides the height prop of Next component.

                    <div >
                        <Image
                            src={img}
                            alt={name}
                            width={100}
                            height={100}
                        />
                    </div>

I solve this to add style={{ height: '100px'}} but I don´t understand the cause of this bug.

[wongjn]

The rule you highlighted above is part of the Preflight styles, Tailwind's CSS reset. The max-width: 100%; height: auto is a fairly well-known combination for making <img> elements not overflow their containing element. The height: auto in this combination ensures that the <img> element's height scales to the resolved aspect ratio of the image if the <img> is scaled due to the max-width: 100% declaration. This avoids the image being distorted.