Tailwind CSS - 分割线颜色

Tailwind CSS - 分隔线颜色

Tailwind CSS 中的 divide-color 工具类提供了一种优雅的方式来控制子元素之间边框的颜色。这通常比手动为每个元素添加边框更简单、更简洁。

工作原理

分隔线工具类需要协同工作。首先，你必须在父容器上使用 divide-x-{width} 或 divide-y-{width} 来确定分隔线的方向和宽度。然后，应用 divide-{color} 工具类来设置颜色。

Tailwind 会智能地为所有直接子元素添加边框，但第一个子元素除外，从而避免出现开头或结尾的边框。

<div class="flex divide-x-2 divide-blue-500">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

基本用法

这是一个创建垂直列表的示例，其中每个项目都通过灰色分隔线隔开。这常用于设置菜单、通知列表或评论区。

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="divide-y divide-slate-200">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-slate-800">Account Settings</h3>
      <p class="text-slate-500 mt-1">Manage your profile and preferences.</p>
    </div>
    <div class="p-6">
      <h3 class="text-lg font-semibold text-slate-800">Notifications</h3>
      <p class="text-slate-500 mt-1">Choose how you receive notifications.</p>
    </div>
    <div class="p-6">
      <h3 class="text-lg font-semibold text-slate-800">Billing</h3>
      <p class="text-slate-500 mt-1">View payment history and manage subscriptions.</p>
    </div>
  </div>
</div>

状态与响应式修饰符

与所有 Tailwind 工具类一样，divide-color 可以使用状态变体（如 hover）和响应式断点（如 md）进行条件性应用。这使得界面（UI）能够动态适应不同情况。

在此示例中，分隔线颜色在鼠标悬停时发生变化，为用户提供视觉反馈。

<div class="flex flex-col divide-y divide-gray-200 hover:divide-indigo-400 transition-colors">
  <a href="#" class="p-4 text-gray-700 hover:bg-gray-50">Profile</a>
  <a href="#" class="p-4 text-gray-700 hover:bg-gray-50">Settings</a>
  <a href="#" class="p-4 text-gray-700 hover:bg-gray-50">Log Out</a>
</div>

使用任意值

如果你需要一个主题中没有的、一次性使用的分隔线颜色，可以直接在 HTML 中使用任意值语法。

<div class="flex divide-x divide-[#ff7e5f]">
  <div class="p-4">Section A</div>
  <div class="p-4">Section B</div>
</div>

分隔线颜色参考

Tailwind 会为你配置的调色板中的每种颜色生成 divide-color 工具类。类名结构为 divide-{color}-{shade}。

类名	CSS 属性
divide-inherit	border-color: inherit;
divide-current	border-color: currentColor;
divide-transparent	border-color: transparent;
divide-black	border-color: rgb(0 0 0);
divide-white	border-color: rgb(255 255 255);
divide-slate-500	border-color: rgb(100 116 139);
divide-red-500	border-color: rgb(239 68 68);
…	…

注意：上表仅为小部分示例。divide-* 类适用于 theme.colors 配置中的所有颜色，包括你添加的任何自定义颜色。