Tailwind CSS背景图片无法渲染求助：已排查同类问题仍未解决

问题描述 #

我查阅并对照了若干同类问题的解决方案，反复检查自身代码后仍未找到问题所在。控制台无报错，仅存在无关紧要的“unknown at rule @tailwind”警告，核心问题为背景图片无法渲染。本人是开发新手，相关代码及信息如下：

相关代码 #

AppLayout.jsx #

import { Outlet } from 'react-router-dom'

import Header from '../components/Header'
import Footer from '../components/Footer'

const AppLayout = () => {
  return (
    <div className="bg-background h-screen">
      <Header />
      <main className="grow">
        <Outlet />
      </main>
      <Footer />
    </div>
  )
}

export default AppLayout

Tailwind.config.js #

/** @type {import('tailwindcss').Config} */
// eslint-disable-next-line import/no-anonymous-default-export
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      backgroundImage: {
        'background': "url('./public/tractor.jpg')",
      },
    },
  },
  plugins: [],
}

补充信息 #

• 已将tailwind.config.js加入prettier忽略文件，避免引号被修改。
• 文件结构：项目根目录包含public文件夹（内有tractor.jpg）、src文件夹（含components和layouts子目录，AppLayout.jsx位于layouts中），以及tailwind.config.js等配置文件。

问题原因与解决方案 #

核心问题 #

Tailwind配置中背景图片的路径错误。Tailwind解析url()路径时，是相对于最终生成的CSS文件位置，而非tailwind.config.js的位置。项目public文件夹下的资源在构建后会被部署到网站根目录，因此不需要添加./public前缀。

解决步骤 #

1. 修改Tailwind配置中的图片路径：
   将tailwind.config.js里的backgroundImage配置修改为：

   backgroundImage: {
     'background': "url('/tractor.jpg')",
   },
   

2. 重启开发服务器：Tailwind配置修改后，部分情况下需要重启开发环境才能让新配置生效。
3. 校验文件名：确认public文件夹内的图片文件名拼写完全一致（注意大小写敏感，如Tractor.jpg与tractor.jpg会被视为不同文件）。

额外提示 #

“unknown at rule @tailwind”警告不会影响功能，若想消除该警告，可给编辑器安装Tailwind CSS相关插件（如VSCode的Tailwind CSS IntelliSense）。

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