bg-repeat-*类对应CSS的repeat、no-repeat、repeat-x、repeat-y四个值，不支持round/space等原生值；需配合background-image使用，否则无效；响应式需用断点前缀组合，自定义需扩展配置。
bg-repeat-* 类名对应哪些 CSS background-repeat 值
Tailwind 的 bg-repeat 系列工具类直接映射 CSS 的 background-repeat 属性值，不是自定义逻辑，也不支持组合（比如不能同时设 repeat-x 和 no-repeat）。常见取值就四个：bg-repeat（默认平铺）、bg-no-repeat、bg-repeat-x、bg-repeat-y。没有 bg-repeat-round 或 bg-repeat-space —— 这些 CSS 原生值 Tailwind 默认不提供，得手动写 CSS 或用 @layer utilities 扩展。
使用场景很明确：图标背景、装饰性纹理、重复的 SVG 图案。如果是渐变或纯色背景，bg-repeat 完全无效，别白试。
-
bg-repeat→background-repeat: repeat（横向+纵向都重复） -
bg-no-repeat→background-repeat: no-repeat（完全不重复） -
bg-repeat-x→background-repeat: repeat-x（只横向重复） -
bg-repeat-y→background-repeat: repeat-y（只纵向重复）
为什么加了 bg-no-repeat 还在平铺
最常见原因是背景图没正确加载，或者 background-image 根本没生效。Tailwind 的 bg-no-repeat 只控制重复行为，不负责设置图片源 —— 它必须和 bg-[url(...)] 或 bg-gradient-to-* 一起用才起作用。单独写 bg-no-repeat，浏览器会按默认 background-image: none 处理，自然看不到效果。
另一个容易被忽略的点：CSS 优先级。如果你在组件里写了 class="bg-no-repeat"，但父元素或全局样式里有更具体的 background-repeat: repeat 声明，那 Tailwind 类会被覆盖。打开 DevTools 看 computed styles 里的 background-repeat 实际值，比猜靠谱。
立即学习“前端免费学习笔记（深入）”；
- 检查是否漏了
bg-[url('/img/pattern.png')]这类背景源声明 - 确认图片路径 404 了没（Network 面板看请求状态）
- 用 DevTools 的 Styles 面板验证
background-repeat是否被其他规则覆盖
响应式地切换平铺方式要怎么写
Tailwind 支持响应式前缀，但 bg-repeat 系列类本身不支持「在某个断点下禁用重复、另一个断点下启用」这种条件切换 —— 因为它没有类似 md:bg-repeat 这样的变体。你只能写 sm:bg-no-repeat md:bg-repeat，但要注意：这会产生层叠，最终生效的是最后一个匹配的类（比如屏幕宽度 ≥768px 时，md:bg-repeat 覆盖 sm:bg-no-repeat）。
性能上没影响，但可维护性差：一旦加了更多断点，类名会变长且难读。真有复杂响应逻辑，建议抽成自定义 class，用 @screen 写 CSS 更清晰。
- 可行写法：
bg-no-repeat sm:bg-repeat md:bg-no-repeat - 别写
md:bg-no-repeat lg:bg-repeat然后指望 xs 下自动恢复默认 —— xs 下没有任何类，background-repeat会回退到浏览器默认值（通常是repeat） - 如果需要「仅在中屏重复，其余都不重复」，老实用
md:bg-repeat+ 全局重置background-repeat: no-repeat
自定义 repeat-space / repeat-round 怎么加
Tailwind 默认不带 repeat-space 和 repeat-round，因为它们兼容性有限（repeat-space 在 Safari 15.4 之前不支持，repeat-round 更晚）。如果项目明确要求支持现代浏览器，可以在 tailwind.config.js 的 theme.extend.backgroundRepeat 里加：
module.exports = {
theme: {
extend: {
backgroundRepeat: {
'space': 'space',
'round': 'round'
}
}
}
}然后就能用 bg-repeat-space 和 bg-repeat-round。但注意：生成的 CSS 会原样输出，不会做兼容性降级。上线前务必查 caniuse 对应目标浏览器的支持情况。
- 加完配置要重启 dev server，否则新类不生效
- 不要在
extend外直接改backgroundRepeat，会丢掉默认值 - 如果只是临时用，比扩展配置更快的方式是内联 style：
style="background-repeat: space"
实际用的时候，多数情况就 bg-no-repeat 和 bg-repeat 足够。真正卡住人的，往往是背景图没加载成功，或者以为加了 bg-no-repeat 就能“让背景居中显示”，结果发现它只是不重复，位置还得靠 bg-center 或 background-position 单独控。
