Tailwind CSS响应式图片显示异常问题求助

问题根源 #

Tailwind的断点采用**最小宽度（min-width）**触发逻辑：sm:hidden的实际作用是「当屏幕宽度≥768px时，给元素添加hidden类」，这和你想要的“小屏隐藏、大屏显示”完全相反。

正确的类名写法 #

要实现目标效果，需要设置默认隐藏图片，在sm断点及以上恢复显示，替换成以下类名：

<img src={astronaught} alt="hero-astronaught" className="hidden sm:block z-[5] w-full h-full relative" />

• hidden：默认状态（所有屏幕尺寸）下隐藏图片
• sm:block：当屏幕宽度≥768px时，将图片的display属性设为block（如果你的布局需要其他display类型，比如inline-block或flex，替换成对应类即可）

为什么hidden sm:visible无效？ #

hidden类设置的是display: none，而visible仅控制visibility: visible，无法覆盖display: none的优先级，因此图片会始终处于隐藏状态。必须使用修改display属性的类（如block）才能恢复显示。

额外验证 #

你的tailwind.config.cjs中的断点配置是正常的（其他边距处理正常可佐证），只需调整类名逻辑即可解决问题。

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