使用Tailwind响应式断点时div背景不生效问题求助

核心问题分析 #

你的代码存在两个关键问题导致背景不切换：

1. 小屏幕下未移除背景图，导致背景颜色被背景图覆盖
2. 使用了Tailwind默认不存在的bg-blue类（默认颜色类需带色阶，如bg-blue-500）

修改后的代码 #

<div className="overflow-auto bg-opacity-50 bg-[url('../images/andrea-inicio.jpg')] h-[calc(75vh+35px)] bg-[length:100%_100%] max-[411px]:bg-none max-[411px]:bg-blue-500">

关键修改说明 #

• max-[411px]:bg-none：在屏幕宽度小于412px时移除背景图，让蓝色背景能正常显示
• 替换bg-blue为bg-blue-500：Tailwind默认颜色系统需要指定色阶（如500代表标准蓝色），若你自定义了bg-blue类可忽略此修改
• 断点用max-[411px]而非max-[412px]：确保严格匹配「＜412px」的触发条件，避免刚好412px时误触发

额外验证步骤 #

1. 确认../images/andrea-inicio.jpg路径正确，保证≥412px时背景图能正常加载
2. 检查Tailwind配置文件未限制自定义背景图片的使用（默认允许）
3. 用浏览器调试工具切换到411px宽度，验证蓝色背景是否生效

内容的提问来源于stack exchange，提问作者Jose Humberto Mendez Hernandez