background-color

示例

基本示例

使用类似 bg-white、bg-indigo-500 和 bg-transparent 这样的工具类来控制元素的背景颜色

<button class="bg-blue-500 ...">Button A</button>
<button class="bg-cyan-500 ...">Button B</button>
<button class="bg-pink-500 ...">Button C</button>

更改不透明度

使用颜色不透明度修饰符来控制元素背景颜色的不透明度

<button class="bg-sky-500/100 ..."></button>
<button class="bg-sky-500/75 ..."></button>
<button class="bg-sky-500/50 ..."></button>

使用自定义值

使用 bg-[<value>] 语法 来设置背景颜色基于完全自定义的值

<div class="bg-[#50d71e] ...">
  <!-- ... -->
</div>

对于 CSS 变量，您还可以使用 bg-(<custom-property>) 语法

<div class="bg-(--my-color) ...">
  <!-- ... -->
</div>

这只是 bg-[var(<custom-property>)] 的简写形式，它会自动为您添加 var() 函数。

悬停时应用

前缀一个 background-color 工具类，使用类似 hover:* 的变体，以仅在该状态下应用该工具类

<button class="bg-indigo-500 hover:bg-fuchsia-500 ...">Save changes</button>

在变体文档中了解更多关于使用变体的信息。

响应式设计

前缀一个 background-color 工具类 使用类似 md: 的断点变体，以仅在中等 屏幕尺寸及以上尺寸的应用该工具类

<div class="bg-blue-500 md:bg-green-500 ...">
  <!-- ... -->
</div>

在变体文档中了解更多关于使用变体的信息。

自定义您的主题

使用 --color-* 主题变量来自定义您项目中的color 工具类

@theme {
  --color-regal-blue: #243c5a; 
}

现在 bg-regal-blue 工具类可以在您的标记中使用

<div class="bg-regal-blue">
  <!-- ... -->
</div>

在 主题文档.