Tailwind 4.0+ 原生支持 bg-[url(...)] 任意值语法，无需配置即可添加背景图，但路径须相对于 CSS 入口文件，需注意编码、引号及配套 bg-cover/bg-center 等修饰类。
背景图片用 bg-[url(...)] 任意值语法最直接
Tailwind 4.0+ 原生支持 bg-[url(...)] 任意值语法，不用改配置就能加背景图，适合临时、动态或少量使用的场景。
注意路径是相对于你的 CSS 构建入口（比如 input.css），不是 HTML 页面；开发时常见错误是写成相对 HTML 的路径，结果 404。
-
bg-[url('../images/hero.jpg')]✅（假设input.css和src/css同级，图片在src/images） -
bg-[url('/images/hero.jpg')]❌（这是根路径，需确保 Web 服务器能直接访问该静态资源） - URL 中不能有空格或未编码的特殊字符，
bg-[url('photo%20bg.jpg')]比bg-[url('photo bg.jpg')]安全 - 如果图片来自 CDN 或绝对 URL，记得加引号：
bg-[url('https://example.com/bg.png')]
需要复用或响应式背景图？往 theme.extend.backgroundImage 里加
当多个地方要用同一张图（比如 bg-hero）、或要配合 md:bg-hero-lg 这类断点控制时，配进 tailwind.config.js 更可靠。
别直接覆盖 theme.backgroundImage，用 extend —— 否则会丢掉 Tailwind 默认的 gradient-to-r 等内置值。
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero': "url('../images/hero.jpg')",
'hero-lg': "url('../images/hero-lg.jpg')",
'dots': "url(\"data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='2' fill='%2394a3b8'/%3E%3C/svg%3E\")"
}
}
}
}
- 键名就是 class 名，
bg-hero对应background-image: url(...) - SVG Data URL 必须用双引号包裹，且内部单引号 + 手动 URL 编码（
%23代替#，%3C代替） - 修改配置后必须重启构建工具（Vite / Webpack / Next.js dev server），热更新不触发 PurgeCSS 重扫
bg-cover、bg-center 这些修饰类必须显式加上
Tailwind 不会自动给 bg-[url(...)] 或自定义 bg-hero 加任何背景行为。只设图片不设尺寸/定位，浏览器按默认 background-repeat: repeat; background-size: auto; 渲染，大概率糊成一片或只显示左上角。
- 常用组合：
bg-hero bg-cover bg-center（等价于background-size: cover; background-position: center;） - 平铺效果：
bg-dots bg-repeat - 固定不动：
bg-fixed（注意：在 iOS Safari 上可能失效，需加-webkit-background-attachment: fixed，Tailwind 不自带） - 透明遮罩常用：
before:content-[''] before:absolute before:inset-0 before:bg-black/30（用伪元素叠一层，比bg-gradient-to-t from-black/50更可控）
生产环境图片路径出错？检查构建时的资源拷贝和 public 目录
本地跑得通，部署后 404 是高频问题。根本原因：Tailwind 只处理 CSS，不管文件是否真被复制到输出目录。
- Vite 项目：把图片放
public/images/，然后用bg-[url('/images/hero.jpg')]（/public下内容原样映射到根路径） - Next.js：静态资源放
public/images/，同样用/images/...路径；若用app/目录，也可通过Image组件生成优化后的 URL，但不能直接用于bg-[url(...)] - Webpack 项目：确认
copy-webpack-plugin或assetsloader 已配置，否则../images/的引用不会被复制进dist/ - 用
curl -I http://yoursite.com/images/hero.jpg实测路径是否可访问，比猜更有效
任意值语法看着方便，但路径解析完全脱离构建系统管控；配置进 backgroundImage 虽多写几行，反而更容易和 asset pipeline 对齐。真正麻烦的从来不是写法，而是图片到底有没有被正确搬运过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
