Remove vertical-align: middle from block elements in default styles

[imadghoummaid]

What version of Tailwind CSS are you using?

For example: v4.1.7

What build tool (or framework if it abstracts the build tool) are you using?

Tailwindcss-cli ^4.1.7

What version of Node.js are you using?

v20.0.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL
https://play.tailwindcss.com/

And when i install tailwindcss and @tailwindcss/cli via npm.

Describe your issue

Currently, Tailwind CSS applies the following default style to several elements:

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}

However, the vertical-align property is ignored when display: block is set. This results in an unnecessary rule that triggers warnings in code editors such as Visual Studio Code:

Property is ignored due to the display. With 'display: block', vertical-align should not be used. (css(propertyIgnoredDueToDisplay))

While vertical-align: middle can be useful for elements with display: inline-block, it serves no purpose in this context. Removing it would improve CSS correctness and eliminate unnecessary warnings.

A better approach could be:

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
}

Or, if necessary, apply vertical-align: middle only when display: inline-block is explicitly used.

Would love to hear thoughts on whether this can be refined in a future release!

[wongjn]

This seems like a feature request of sorts so migrated to a discussion.

So the vertical-align is intended as per the comment:

tailwindcss/packages/tailwindcss/preflight.css

Lines 203 to 219 in f0f42f6

	/*
	1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
	2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
	This can trigger a poorly considered lint error in some tools but is included by design.
	*/
	img,
	svg,
	video,
	canvas,
	audio,
	iframe,
	embed,
	object {
	display: block; /* 1 */
	vertical-align: middle; /* 2 */
	}