React中Tailwind媒体查询效果与预期相反，如何修复？

Tailwind采用移动优先的断点逻辑：默认写的类直接应用在移动端，带断点前缀（比如md:）的类只会在对应断点及更大屏幕上生效，覆盖默认样式。

你要实现「移动端用w-2，桌面端用默认宽度」，只需调整类的设置即可：

• 把w-2设为默认类（移动端直接生效）
• 给桌面端（md及以上）添加md:w-auto，让图片恢复自身默认宽度（img标签默认按自身尺寸显示，w-auto会取消移动端的固定宽度限制）

修改后的代码：

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

如果你的默认宽度不是图片自身尺寸，而是需要匹配h-20的比例宽度，可以把md:w-auto换成具体的宽度值（比如md:w-20，根据实际需求调整）。

内容的提问来源于stack exchange，提问作者codebot