Next.js 14 + TailwindCSS无法设置背景图片问题求助

1. 修正Tailwind配置中的图片路径 #

你当前tailwind.config.ts里的背景图片路径错误。Next.js的public目录是静态资源的根访问路径，URL不需要包含/public前缀。

修正后的tailwind.config.ts：

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'tech': "url('/assets/sfondo (1).avif')", // 去掉/public前缀
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}
export default config

2. 确保容器高度生效 #

你的div用了h-full，但如果父元素（html、body、根容器）没有设置高度，h-full不会生效，导致背景图片无法显示。可以通过两种方式解决：

• 替换h-full为h-screen，让容器占满整个视口高度：

export default function Home() {
  return (
    <div className="h-screen bg-tech bg-no-repeat bg-cover bg-center bg-fixed">
      <h1>Hello world</h1>
    </div>
  )
}

• 或者在global.css中设置全局高度：

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body, :root {
  height: 100%;
}

3. 其他排查方向 #

• 检查图片路径与文件名：确认public/assets目录下确实存在sfondo (1).avif，注意文件名的空格、括号、大小写（Linux/macOS环境区分大小写）。
• 测试图片格式兼容性：尝试将图片换成PNG/JPG格式，排除AVIF格式的兼容性问题。
• 排查全局样式冲突：如果之前在global.css中写过自定义类，检查是否有优先级更高的样式（比如带!important）覆盖了背景图片设置。
• 清除缓存：重启Next.js开发服务器，同时清除浏览器缓存（Ctrl+Shift+R），避免旧配置缓存导致不生效。

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