Tailwind CSS - 边框颜色

# Tailwind CSS 现代指南：边框颜色

样式化边框是网页设计的基本组成部分。Tailwind CSS 提供了一套全面且一致的工具类，用于控制边框颜色，并完全集成到你的项目设计系统中。

## 边框颜色系统

你无需记住十六进制颜色代码，只需使用一个简单、可预测的模式：border-{color}-{shade}。

{color}：指代你主题调色板中的颜色（例如 slate、red、emerald、sky）。
{shade}：一个从 50（最浅）到 950（最深）的数字，用于指定颜色强度。

例如，border-blue-500 应用主蓝色，而 border-slate-200 应用浅灰色，非常适合细微的分隔线。

## 常见边框颜色工具类

类	CSS 属性
`border-transparent`	`border-color: transparent;`
`border-current`	`border-color: currentColor;`
`border-black`	`border-color: #000;`
`border-white`	`border-color: #fff;`
`border-slate-500`	`border-color: rgb(100 116 139);`
`border-red-500`	`border-color: rgb(239 68 68);`

注意： 这只是一个小的示例。完整的默认颜色调色板可用，包括 gray、zinc、neutral、stone、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、indigo、violet、purple、fuchsia、pink 和 rose。

## 实际示例：交互式按钮

让我们应用这些类来样式化响应用户交互的按钮。我们还将样式化单个侧面的边框。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Border Color Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 p-8 flex flex-col items-center justify-center font-sans">

  <div class="w-full max-w-2xl space-y-6">
    <!-- 基本边框颜色 -->
    <div class="p-4 bg-white dark:bg-slate-800 rounded-lg border-2 border-slate-300 dark:border-slate-600">
      <p class="text-slate-800 dark:text-slate-200">一个带有简单 `border-slate-300` 的容器。</p>
    </div>

    <!-- 交互式边框颜色 -->
    <button class="w-full p-4 font-semibold text-indigo-600 dark:text-indigo-400 bg-white dark:bg-slate-800 rounded-lg border-2 border-indigo-300 dark:border-indigo-700 hover:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-900 transition-colors">
      悬停或聚焦我（`hover:border-indigo-500`）
    </button>

    <!-- 单独的侧边颜色 -->
    <div class="p-4 bg-white dark:bg-slate-800 rounded-lg border-t-4 border-b-4 border-t-teal-400 border-b-fuchsia-400">
      <p class="text-slate-800 dark:text-slate-200">顶部边框是 `border-t-teal-400`，底部是 `border-b-fuchsia-400`。</p>
    </div>

    <!-- 使用 border-current -->
    <div class="p-4 text-green-600 dark:text-green-400 bg-white dark:bg-slate-800 rounded-lg border-2 border-current">
      <p class="font-semibold">此边框的颜色（`border-current`）与文本颜色（`text-green-600`）匹配。</p>
    </div>
  </div>

</body>
</html>

## 自定义边框颜色

Tailwind 最强大的优势之一是可定制性。你可以轻松地将自己的品牌颜色添加到 tailwind.config.js 文件中，它们将自动作为边框颜色工具类可用。

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#4F46E5',
        'brand-secondary': '#10B981',
      },
    },
  },
  plugins: [],
}

通过此配置，你现在可以在 HTML 中使用 border-brand-primary 等类。

## 最佳实践

坚持主题： 尽可能使用主题中的颜色（border-slate-200、border-blue-500），而不是任意值。这确保了整个应用程序的视觉一致性。
不透明度修饰符： 你可以通过添加斜杠和百分比来控制边框颜色的不透明度，例如 border-blue-500/75。这需要适当的构建设置。
单个侧面： 分别使用 border-t-*、border-r-*、border-b-* 和 border-l-* 来表示顶部、右侧、底部和左侧边框。为了方便，你也可以使用 border-x-*（左右）和 border-y-*（上下）。