background-image的URL路径必须相对于HTML文件而非CSS文件；Tailwind默认不提供背景图工具类，需自定义class或配置，且应配合bg-no-repeat、bg-cover等属性使用，并注意XSS风险与加载失败兜底。
background-image 要用 url() 且路径必须相对 HTML 文件
Tailwind 默认不直接提供 background-image 的工具类，得自己写 CSS 或用 @layer utilities 扩展。最稳妥的方式是写自定义 class：
.bg-pattern {<br> background-image: url('./assets/pattern.png');<br>}注意路径是相对于构建后的 HTML 文件（比如 Vite 项目中是 index.html 所在目录），不是相对于 CSS 文件。用 ../ 往上跳级容易出错，建议把图片放 public/ 下，然后写 url('/pattern.png')。
background-position 必须配合 background-repeat 和 background-size
只设 background-position: center 没用——如果图片没铺满、又没禁用重复，默认会平铺，位置偏移就看不出来。实际要用时得组合控制：
-
background-repeat: no-repeat（Tailwind 对应bg-no-repeat） -
background-size: cover或contain（对应bg-cover/bg-contain） - 再加位置类，比如
bg-center、bg-top-right、bg-[50px_30px]
bg-[50px_30px] 是 arbitrary value 写法，支持 px/%/rem，但要注意括号内不能有空格（bg-[50px_30px] ✅，bg-[50px 30px] ❌）。任意位置值（arbitrary value）要防 CSS 注入风险
用 bg-[...] 写动态位置时，如果值来自用户输入（比如 CMS 后台填的坐标），必须做校验。Tailwind 不会过滤非法字符串，bg-['"]onerror=alert(1)//'] 这种可能触发内联样式 XSS。生产环境建议：
- 只允许数字 + 单位（
^\d+(px|rem|%|em)$） - 或预设几个安全值（
top、center、bottom left等），用switch映射到 class - 避免直接拼接字符串进 className
背景图加载失败时没有 fallback 机制
Tailwind 不处理图片加载失败场景。如果 url(...) 404，浏览器只会留白或显示默认背景色。要兜底得靠 CSS：
.bg-pattern {<br> background-color: #f1f1f1;<br> background-image: url('/pattern.png');<br> /* 图片加载失败时，color 会透出来 */<br>}或者用 JavaScript 监听 img 元素的 onerror（但 background-image 没这个事件），更实际的做法是：确保构建流程把图片复制进输出目录，并在 CI 中加文件存在性检查。
立即学习“前端免费学习笔记（深入）”；
