ReactJS中的顺风媒体查询

h-20 应用 height 不 width 。你是不是打算申请 w-20 而是上课?

根据 the documentation :

默认情况下,Tailwind使用移动第一断点系统,类似于您在Bootstrap等其他框架中可能使用的系统。

这意味着不固定的实用程序(如 uppercase )在所有屏幕大小上生效,同时以实用程序为前缀(如 md:uppercase )仅在指定的断点处生效 及以上 .

因此,对于您的情况,您应该:

<img src="/assets/logo.png" className="md:h-20 w-2" alt="logo"/>

因此 w-2 申请移动设备,然后 h-20 或 w-20 从…起 md:h-20 或 md:w-20 )适用于桌面(符合 @media (min-width: 768px) 默认情况下的媒体查询 md 断点配置)。