背景颜色

​基础用法

​设置背景颜色

使用 bg-white、bg-indigo-500 和 bg-transparent 等实用程序来控制元素的背景颜色。

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

​更改不透明度

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

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

您可以使用 opacity scale 中定义的任何值，或者如果您需要偏离设计令牌，则可以使用任意值。

<div class="bg-sky-500/[.06] ..."></div>

​有条件申请

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:bg-cyan-600 来仅 在 hover应用 bg-cyan-600.

<button class="bg-cyan-500 hover:bg-cyan-600 ...">Subscribe</button>

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:bg-green-500 来应用 bg-green-500 程序，适用于中等屏幕尺寸及以上。

<button class="bg-blue-500 md:bg-green-500 ...">Subscribe</button>

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.

​使用自定义值

​定制你的主题

By default, Tailwind makes the entire default color palette available as background colors. You can customize your color palette by editing theme.colors or theme.extend.colors in your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

Alternatively, you can customize just your background colors by editing theme.backgroundColor or theme.extend.backgroundColor in your tailwind.config.js file.

Learn more about customizing the default theme in the theme customization documentation.

​任意值

如果您需要使用一次性的 color值，而该值没有必要包含在主题中，请使用方括号动态生成属性，使用任意值。

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

进一步了解，请参考 任意值 文档.