Tailwind 3如何为多层背景分别设置不同的background-repeat属性

目标原生CSS效果：

background: url('img1.png') repeat 20%, url('img2.png') no-repeat;

现有接近效果的写法已完成背景图引入、尺寸配置：

bg-[url("img1.png"),url("img2.png")] bg-[length:20%,auto] bg-repeat

该写法的缺陷是所有背景层统一应用了repeat规则，无法实现第一层重复、第二层不重复的分层配置。

解决方案 #

直接通过任意值语法给bg-repeat传入逗号分隔的多值，按背景层顺序对应配置即可，完整可用类名：

bg-[url("img1.png"),url("img2.png")] bg-[length:20%,auto] bg-[repeat,no-repeat]

注意事项 #

• Tailwind 3的JIT引擎解析多背景相关任意值时，完全遵循原生CSS的多值对应规则，background-repeat、background-size、background-position等属性都支持逗号分隔传值，顺序和bg-[url()]里写入的背景层顺序一一对应
• 上述写法最终编译出的CSS中，background-repeat属性值为repeat, no-repeat，正好匹配第一层背景重复、第二层背景不重复的需求
• 任意值内逗号前后不要添加多余空格，避免引擎解析失败

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