tailwindcss-backgrounds

Tailwind CSS v4.3 背景工具完整参考：使用 OKLCH P3 色彩调色板的 `bg-{color}`（包括 v4.2 新增的 `mauve`/`olive`/`mist`/`taupe` 调色板）、渐变（`bg-linear-*`、`bg-radial-*` 和 `bg-conic-*`）、背景图片（`bg-cover`/`bg-contain`/`bg-repeat`/定位/尺寸）以及混合模式（`bg-blend-*`）。

包含渐变色标控制（from-*/via-*/to-*）、自定义角度线性渐变，以及用于扩展自定义颜色和背景图片的主题配置。

Tailwind CSS 背景技能

Tailwind CSS v4.3 背景工具完整参考，涵盖颜色、渐变、图片、定位、尺寸和混合模式。

背景颜色

使用 bg-{color} 工具通过现代化的 OKLCH 调色板设置背景颜色。

<div class="bg-red-500"></div>
<div class="bg-blue-600"></div>
<div class="bg-emerald-400"></div>


<div class="bg-blue-500/50"></div>
<div class="bg-slate-900/75"></div>

色彩调色板（OKLCH P3）

Tailwind 默认调色板使用 OKLCH 色彩空间，让色彩在更广的 P3 色域中保持感知均匀：

• 中性色：slate、gray、zinc、neutral、stone
• 带色调的中性色（自 v4.2 起）：mauve、olive、mist、taupe
• 颜色：red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose

每种颜色包含 11 个色阶：50、100、200、300、400、500、600、700、800、900、950

线性渐变

使用 bg-linear-* 工具和方向及色标创建线性渐变。

<div class="bg-linear-to-t from-blue-500 to-purple-500"></div>
<div class="bg-linear-to-r from-green-400 via-blue-500 to-purple-600"></div>
<div class="bg-linear-to-br from-yellow-200 to-red-600"></div>





<div class="bg-linear-45 from-slate-400 to-slate-600"></div>
<div class="bg-linear-180 from-indigo-500 to-pink-500"></div>

方向工具

• bg-linear-to-t - 向上
• bg-linear-to-tr - 向右上
• bg-linear-to-r - 向右
• bg-linear-to-br - 向右下
• bg-linear-to-b - 向下
• bg-linear-to-bl - 向左下
• bg-linear-to-l - 向左
• bg-linear-to-tl - 向左上
• bg-linear-<angle> - 自定义角度（例如，bg-linear-45）

径向渐变

使用 bg-radial-* 工具创建径向渐变。

<div class="bg-radial from-yellow-400 to-slate-900"></div>
<div class="bg-radial from-purple-200 via-blue-400 to-slate-950"></div>

圆锥渐变（自 v4.0 起）

使用 bg-conic-* 工具创建圆锥渐变，适用于色轮和圆形图案。

<div class="bg-conic-0 from-red-500 to-red-500"></div>
<div class="bg-conic-45 from-blue-400 via-purple-500 to-pink-400"></div>
<div class="bg-conic-[from_45deg] from-slate-400 to-slate-600"></div>

渐变色标

使用 from-*、via-* 和 to-* 工具控制渐变色标。

<div class="bg-linear-to-r from-blue-500 to-purple-500"></div>


<div class="bg-linear-to-r from-green-400 via-blue-500 to-purple-600"></div>


<div class="bg-linear-to-r from-blue-500 from-0% to-purple-500 to-100%"></div>

背景图片

使用 bg-[url(...)] 应用自定义背景图片。

<div class="bg-[url(/img/mountains.jpg)]"></div>
<div class="bg-[url(data:image/svg+xml,...)]"></div>

背景尺寸

控制背景图片的尺寸。

<div class="bg-cover"></div>
<div class="bg-contain"></div>


<div class="bg-[size:10rem]"></div>
<div class="bg-[size:50%]"></div>
<div class="bg-[size:200px_100px]"></div>

背景位置

设置背景图片在容器中的位置。

<div class="bg-top-left"></div>
<div class="bg-top"></div>
<div class="bg-top-right"></div>
<div class="bg-left"></div>
<div class="bg-center"></div>
<div class="bg-right"></div>
<div class="bg-bottom-left"></div>
<div class="bg-bottom"></div>
<div class="bg-bottom-right"></div>


<div class="bg-[position:25%_75%]"></div>

背景重复

控制背景图片的重复方式。

<div class="bg-repeat"></div>
<div class="bg-repeat-x"></div>
<div class="bg-repeat-y"></div>


<div class="bg-no-repeat"></div>

背景混合模式

使用混合模式将背景颜色与图片结合。

<div class="bg-blue-500 bg-[url(...)] bg-blend-multiply"></div>
<div class="bg-slate-700 bg-[url(...)] bg-blend-overlay"></div>
<div class="bg-amber-400 bg-[url(...)] bg-blend-soft-light"></div>

完整示例

带透明度的背景颜色

<div class="bg-slate-900/50 px-6 py-8 rounded-lg">
  Content with translucent background
</div>

图片上的渐变叠加层

<div class="bg-[url(/img/hero.jpg)] bg-cover bg-center
           bg-linear-to-br from-black/40 to-transparent
           h-96 flex items-center justify-center">
  <h1 class="text-white text-4xl font-bold">Hero Title</h1>
</div>

多色标渐变

<div class="bg-linear-to-r
           from-emerald-500 from-0%
           via-blue-500 via-50%
           to-purple-600 to-100%
           h-20 rounded-lg"></div>

圆锥渐变（色轮）

<div class="w-32 h-32 rounded-full
           bg-conic-0
           from-red-500 via-yellow-500 via-green-500 via-blue-500 via-purple-500 to-red-500"></div>

使用混合模式的图片

<div class="w-full h-80
           bg-blue-600
           bg-[url(/img/pattern.png)] bg-cover bg-center
           bg-blend-multiply
           rounded-lg"></div>

自定义

在 Tailwind 配置中扩展背景工具：

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: 'oklch(0.971 0.013 17.38)',
          500: 'oklch(0.637 0.237 25.331)',
          950: 'oklch(0.258 0.092 26.042)',
        },
      },
      backgroundImage: {
        gradient: 'url(\'/img/gradient.png\')',
      },
    },
  },
}

性能提示

1. 使用颜色工具代替十六进制值，以获得更好的优化效果
2. 结合 bg-no-repeat 和尺寸设置，避免不必要的重复
3. 使用多个背景工具叠加渐变，实现复杂效果
4. 使用透明度修饰符（/50）代替 rgba，以便更好地进行树摇优化
5. 尽可能优先使用圆锥/径向渐变而非图片，以减小文件体积

详细参考

• colors.md - 选择特定颜色系列、色阶、OKLCH 值或语义/无障碍颜色搭配时加载
• gradients.md - 构建线性/径向/圆锥渐变或设置色标位置时加载
• images.md - 应用背景图片、设置尺寸/位置/重复方式或使用混合模式时加载