# [LEARN-20260430-002] Tailwind v4 下 `border-t / border-b / border` 不带颜色变成黑线

## 触发场景

写 `ops-center/m365-dormant` 列表页用了：

```tsx
<tr className="border-t hover:bg-gray-50">
```

实际渲染：**每行之间一道黑色粗线**——而项目其他模块用的是浅灰 `#f2f3f5`，整体 Lark 风格。

## 根因

**项目用 Tailwind v4**（见 `frontend/package.json`：`"tailwindcss": "^4"`）。

Tailwind v3 → v4 一处**破坏性默认值变更**：

| 版本 | `border-t`（不带颜色）| 实际效果 |
|---|---|---|
| **v3** | `border-color: rgb(229 231 235)` (gray-200) | 浅灰，看起来正常 |
| **v4** | `border-color: currentColor`（继承当前文字色）| 文字一般是 `text-gray-900` 或近黑色 → **黑色边框** |

迁移指南：https://tailwindcss.com/docs/upgrade-guide#default-border-color

整个 ops-center 页面有 7 处 `border-t / border-b / border` 都没指定颜色 → 全部黑线。

## 解决方案（项目惯例）

**项目设计 token 在 `frontend/src/styles/theme.ts`**：

```ts
border:      '#e5e6eb',   // 默认边框（卡片、输入框、tab 分隔）
borderHover: '#c9cdd4',
// 行间分隔（更浅）：#f2f3f5
// thead 背景：#f7f8fa
// 主色：#3370ff（Lark blue，不是 Tailwind blue-600）
```

参考 `frontend/src/app/(modules)/organization/roles/system-roles/page.tsx` 的表格写法：

```tsx
<thead style={{ backgroundColor: '#f7f8fa', borderBottom: '1px solid #e5e6eb' }}>
<tr style={{ borderBottom: idx < items.length - 1 ? '1px solid #f2f3f5' : 'none' }}>
```

或用 Tailwind arbitrary values：

```tsx
<tr className="border-b border-[#f2f3f5]">
```

## 写代码时的硬规则

**不要**：

```tsx
<div className="border" />           // ❌ Tailwind v4 = 黑色
<div className="border-t" />         // ❌
<div className="border-b border-blue-600" />  // ❌（颜色对，但不是项目 token）
```

**要**：

```tsx
<div className="border border-[#e5e6eb]" />              // ✅ 用 token
<div className="border-t border-[#f2f3f5]" />            // ✅ 行间用更浅的色
<div className="border-b-2 border-[#3370ff]" />          // ✅ 主色
// 或 inline style + theme import：
<div style={{ borderBottom: `1px solid ${colors.border}` }} />
```

**colors 调色板**（直接复制用）：

| 用途 | 颜色 |
|---|---|
| 卡片/输入框边框 | `#e5e6eb` |
| 行间分隔（更浅） | `#f2f3f5` |
| 边框 hover | `#c9cdd4` |
| 主色（按钮、tab、链接） | `#3370ff` |
| 主色 hover | `#1e5eff` |
| thead / hover 背景 | `#f7f8fa` |
| 文字主 / 次 / 三级 | `#1f2329` / `#646a73` / `#8f959e` |
| 成功 / 错误 / 警告 | `#00b42a` / `#f53f3f` / `#ff7d00` |

## 自检 checklist（写完前端必跑）

```bash
# 找出所有 border 但没指定颜色的地方
grep -rn 'className=".*\bborder\b\(-[a-z]\+\)\?\s\+[^"]*"' src/app/(modules)/<module>/ \
  | grep -vE 'border-\[#|border-\(--|border-(gray|blue|red|green|yellow|purple|pink|orange|slate|zinc|neutral|stone|amber|emerald|teal|cyan|sky|indigo|violet|fuchsia|rose)-'
```

如果有匹配结果，说明该处会渲染黑线。

## 后续行动

1. ✅ 修复本次 ops-center/m365-dormant/page.tsx 的 7 处黑线
2. ⏳ 把"Lark 设计 token + Tailwind v4 规则"写进 `frontend-main` skill 的设计系统段
3. ⏳ 评估加 ESLint 规则禁止 `border-t/b/l/r` 不带颜色（`tailwindcss/no-custom-classname` 不够，需要自定义 rule）