如何用Tailwind CSS实现屏幕≥375px时切换移动端/桌面端图片

因为Tailwind默认响应式断点没有375px，所以首先需要自定义这个断点，以下是两种常用实现方式：

方案1：双img标签配合响应式显示/隐藏 #

这是纯HTML场景下最直接的实现方式，无需额外JS。

第一步：自定义断点 #

在tailwind.config.js中添加375px的自定义断点：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'sm-375': '375px', // 自定义断点名称，可按需修改
      },
    },
  },
  plugins: [],
}

第二步：编写HTML结构 #

通过sm-375:block和sm-375:hidden控制不同断点下图片的显示状态：

<!-- 移动端图片：默认显示，屏幕≥375px时隐藏 -->
<img src="images/bg-curve-mobile.svg" alt="背景曲线" class="block sm-375:hidden" />

<!-- 桌面端图片：默认隐藏，屏幕≥375px时显示 -->
<img src="images/bg-curve-desktop.svg" alt="背景曲线" class="hidden sm-375:block" />

方案2：背景图片切换（适合作为容器背景的场景） #

如果该图片是作为容器背景使用，可直接通过Tailwind响应式背景类切换：

<!-- 容器默认使用移动端背景，≥375px时切换为桌面端背景 -->
<div class="bg-[url('images/bg-curve-mobile.svg')] sm-375:bg-[url('images/bg-curve-desktop.svg')] w-full h-[200px]">
  <!-- 容器内部内容 -->
</div>

补充：无需修改配置的临时写法（不推荐） #

如果不想修改Tailwind配置，可通过内联媒体查询实现，但这种写法不符合Tailwind原子类风格：

<img src="images/bg-curve-mobile.svg" alt="背景曲线" class="block" />
<img 
  src="images/bg-curve-desktop.svg" 
  alt="背景曲线" 
  class="hidden" 
  style="
    @media (min-width: 375px) {
      display: block !important;
    }
    @media (max-width: 374px) {
      display: none !important;
    }
  " 
/>

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