React使用Tailwind类bg-[url('/images/bg-header-mobile.svg')]报错求助

开发者阿泽

2026-8-26

解决Tailwind CSS自定义背景图模块找不到的问题

检查图片位置与路径匹配

先确认images/bg-header-mobile.svg的实际存放位置，对应调整路径写法：

若图片在src/images目录下：将Tailwind类中的路径改为相对路径（相对于src/index.css的位置）：
```
bg-[url('./images/bg-header-mobile.svg')]
```
若图片在项目根目录的public/images下：直接使用根路径（public目录下的资源可通过根路径直接访问）：
```
bg-[url('/images/bg-header-mobile.svg')]
```
注意：需确保public文件夹下确实存在images子目录和对应SVG文件。

确保Tailwind能扫描到你的组件

检查tailwind.config.js的content配置，确保覆盖App.js所在的文件范围，让Tailwind能解析到自定义背景类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // 覆盖src下所有JS/JSX文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}