# Tailwind `divide-y` 不继承父元素 inline `borderColor`

> **date**: 2026-05-11
> **scope**: frontend / Tailwind
> **severity**: 视觉 bug，非 P0
> **type**: gotcha

## 现象

```tsx
<dl className="divide-y" style={{ borderColor: colors.bgTertiary }}>
  {items.map((c) => <div>...</div>)}
</dl>
```

预期：子元素之间分隔线颜色 = `colors.bgTertiary`（浅灰）。
实际：分隔线是 Tailwind 默认的较深灰（接近黑色）。

## 根因

`divide-y` 是给**子元素**加 `border-top-width: calc(1px * ...)` 的 utility，但 **不**继承父元素 inline `style.borderColor`。它只看 Tailwind 的 `--tw-divide-{color}` CSS 变量；不显式设置 `divide-{color}` 类时，回退到 Tailwind 默认 border 颜色。

inline `borderColor` 设在父 `<dl>` 上完全不起作用——子元素的 border 走自己的级联，跟父 inline 样式无关。

## 修复

**方案 A**：用 Tailwind 提供的 divide 颜色 utility。

```tsx
<dl className="divide-y divide-[#eff0f1]">
```

**方案 B（推荐）**：放弃 `divide-y`，每个子元素手动加 inline borderTop（除第一项）。

```tsx
<dl>
  {items.map((c, idx) => (
    <div
      style={idx > 0 ? { borderTop: `1px solid ${colors.bgTertiary}` } : undefined}
    >
      ...
    </div>
  ))}
</dl>
```

推荐 B 的理由：颜色直接从 `colors.*` 主题对象取值，与项目 design tokens 一致；Tailwind 任意值 `divide-[#xxx]` 把颜色硬编进 className，绕过主题系统。

## 影响范围

在仓库内重复出现 3 次，全部已修复：

- [frontend/src/components/help/ConceptsSection.tsx](frontend/src/components/help/ConceptsSection.tsx)
- [frontend/src/app/(modules)/robot-manager/help/page.tsx](frontend/src/app/(modules)/robot-manager/help/page.tsx) ConceptsSection
- 同上文件 BusinessFlowSection 的 steps `<ol className="divide-y">`

## 怎么早发现

新建组件 / 抄 robot-manager 现有 help 页模式时，看到 `<X className="divide-y" style={{ borderColor: ... }}>` 这种"inline borderColor + divide-y 配对"立刻警觉——这两个搭配永远不工作。

## 关联

CLAUDE.md "9. 持续优化 AI-first 工作方式" — 重复出现的反模式必须沉淀。