Skip to content
W3S101

Tailwind CSS - 背景颜色

精通 Tailwind CSS 中的背景颜色

Section titled “精通 Tailwind CSS 中的背景颜色”

Tailwind CSS 提供了一个功能丰富的、实用程序优先的系统来应用背景颜色。您无需编写自定义 CSS，而是直接在 HTML 中使用预定义的类。这种方法加速了开发，确保了一致性，并与 Tailwind 的设计系统无缝集成。

理解背景颜色工具类

Section titled “理解背景颜色工具类”

背景颜色的核心语法是 bg-{color}-{shade}。Tailwind 包含一个精美的默认颜色调色板，它既全面又易于使用。

  • bg-：所有背景颜色工具类的前缀。
  • {color}：颜色的名称，例如 slate、red、green 或 indigo。
  • {shade}：一个从 50（最浅）到 950（最深）的数字值，控制颜色的强度。500 阴影通常是基准色。

核心颜色调色板

Section titled “核心颜色调色板”

Tailwind 的默认调色板包含一组中性灰色（Slate、Gray、Zinc、Neutral、Stone）和全光谱的鲜艳颜色（Red、Orange、Amber、Yellow、Lime、Green、Emerald、Teal、Cyan、Sky、Blue、Indigo、Violet、Purple、Fuchsia、Pink、Rose）。您可以在 Tailwind CSS 文档中探索完整的官方调色板。

以下是可用类的一个代表性示例。请注意，每个颜色名称都包含从 50 到 950 的色阶（shades）。

类名CSS 属性
bg-inheritbackground-color: inherit;
bg-currentbackground-color: currentColor;
bg-transparentbackground-color: transparent;
bg-blackbackground-color: rgb(0 0 0);
bg-whitebackground-color: rgb(255 255 255);
bg-slate-50background-color: rgb(248 250 252);
bg-slate-500background-color: rgb(100 116 139);
bg-slate-900background-color: rgb(15 23 42);
bg-red-50background-color: rgb(254 242 242);
bg-red-500background-color: rgb(239 68 68);
bg-red-900background-color: rgb(127 29 29);
bg-green-50background-color: rgb(240 253 244);
bg-green-500background-color: rgb(34 197 94);
bg-green-900background-color: rgb(20 83 45);

现代特性与最佳实践

Section titled “现代特性与最佳实践”

1. 应用不透明度

Section titled “1. 应用不透明度”

通过添加 / 后缀，后跟一个百分比值（从 0 到 100），您可以轻松控制背景颜色的不透明度。这是由 Tailwind 的 JIT 引擎提供支持的一种现代、直观的语法。

<!-- 50% 不透明度的蓝色背景 -->
<div class="bg-blue-500/50">...</div>


<!-- 悬停时 75% 不透明度的石板色背景 -->
<button class="bg-slate-200 hover:bg-slate-900/75">...</button>

2. 使用任意值

Section titled “2. 使用任意值”

如果默认调色板没有您在一次性场景中需要的确切颜色，您可以直接在类名中使用任意值。这避免了为单个用例编写自定义 CSS 的需要。

<!-- 为品牌颜色使用特定的十六进制代码 -->
<div class="bg-[#1DA1F2]">...</div>


<!-- 使用 RGB 值 -->
<div class="bg-[rgb(255,0,0)]">...</div>

3. 自定义您的颜色调色板

Section titled “3. 自定义您的颜色调色板”

对于实际项目，您会希望自定义您的颜色调色板以匹配您的品牌标识。这在 tailwind.config.js 文件中完成。通过扩展主题，您可以在保留 Tailwind 默认颜色的同时添加自己的颜色。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#3490dc',
        'brand-secondary': '#ffed4a',
        'brand-danger': '#e3342f',
      },
    },
  },
}

然后，您可以在 HTML 中使用这些自定义颜色：<button class="bg-brand-primary text-white">点击我</button>

实际示例：交互式卡片

Section titled “实际示例：交互式卡片”

此示例演示了如何使用背景颜色工具类（包括 hover 等状态变体）来构建一个现代的交互式卡片组件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Modern Card with Backgrounds</title>
</head>
<body class="bg-slate-100 flex items-center justify-center h-screen">


  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white">
    <div class="h-48 bg-cover bg-center" style="background-image: url('https://source.unsplash.com/random/400x300')"></div>
    <div class="p-6">
      <div class="font-bold text-xl mb-2 text-slate-800">Modern Component</div>
      <p class="text-gray-700 text-base">
        This card uses a white background for a clean look. The button below changes its background color on hover, providing clear visual feedback to the user.
      </p>
    </div>
    <div class="px-6 pt-4 pb-6">
      <button class="w-full bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75 transition-colors duration-300">
        Learn More
      </button>
    </div>
  </div>


</body>
</html>