---
description: "Tailwind CSS 样式规范 — 类名顺序/响应式/暗色模式/主题桥接。管理端与 Element Plus 共存，用户端纯 Tailwind + Headless UI（禁止 Element Plus）"
globs:
  - "**/*.vue"
  - "**/*.css"
  - "**/*.scss"
alwaysApply: false
---

# 🎨 Tailwind CSS Standards

> **⚠️ 双前端区分**：
> - **管理端** (`Case-Database-Frontend-admin/`)：Tailwind + Element Plus 共存，下方「管理端专属」章节适用
> - **用户端** (`Case-Database-Frontend-user/`)：纯 Tailwind + Headless UI，**禁止 Element Plus**

## 职责划分（管理端 — Tailwind + Element Plus 共存）

| 层级 | 使用 Tailwind | 使用 Element Plus（仅管理端） |
|------|--------------|------------------|
| 页面布局 | `flex`, `grid`, `container`, spacing | - |
| 间距/定位 | `p-*`, `m-*`, `absolute`, `relative` | - |
| 表单控件 | - | `el-form`, `el-input`, `el-select` |
| 数据展示 | - | `el-table`, `el-pagination`, `el-tag` |
| 反馈组件 | - | `el-dialog`, `el-message`, `el-notification` |
| 自定义 UI | 背景、边框、阴影、圆角 | - |
| 文字排版 | `text-*`, `font-*`, `leading-*` | - |

**管理端原则**: Element Plus 组件优先使用其 `size`/`type`/`effect` 等内置 props 控制样式；
Tailwind 负责组件之间的布局、间距和非组件区域的装饰。

**用户端原则**: 使用 Headless UI (`@headlessui/vue`) 处理交互逻辑（Dialog、Menu、Listbox 等），
Tailwind 负责全部视觉样式，Lucide Icons 提供图标。

## 类名顺序

布局 → 定位 → 尺寸 → 间距 → 背景 → 边框 → 文字 → 效果 → 交互 → 动画

```html
class="flex items-center justify-between relative w-full h-10 px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-2 transition-colors"
```

## 响应式断点（移动优先）

| 断点 | 前缀 | 最小宽度 | 典型设备 |
|------|------|---------|---------|
| xs (默认) | 无 | 0px | 手机竖屏 |
| sm | `sm:` | 640px | 手机横屏 |
| md | `md:` | 768px | 平板 |
| lg | `lg:` | 1024px | 小屏桌面 |
| xl | `xl:` | 1280px | 桌面 |
| 2xl | `2xl:` | 1536px | 大屏桌面 |

```html
<!-- 列数：手机1 → 平板2 → 桌面3 → 大屏4 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
  ...
</div>

<!-- 内边距：手机小 → 桌面大 -->
<main class="p-4 md:p-6 xl:p-8 max-w-screen-2xl mx-auto">...</main>

<!-- 隐藏/显示 -->
<nav class="hidden lg:flex"><!-- 桌面导航 --></nav>
<button class="lg:hidden"><!-- 移动端汉堡菜单 --></button>
```

> **规则**：禁止使用 `max-*` 断点前缀（如 `max-md:hidden`），始终从小屏写起向上覆盖。

## 暗色模式（统一方案）

通过 CSS 变量实现 Tailwind 暗色主题（管理端同时同步 Element Plus）：

```scss
// src/assets/styles/variables.scss
:root {
  --el-color-primary: theme('colors.blue.500');
  --app-bg: theme('colors.white');
  --app-text: theme('colors.gray.900');
}

html.dark {
  --el-color-primary: theme('colors.blue.400');
  --app-bg: theme('colors.gray.900');
  --app-text: theme('colors.gray.100');
}
```

```html
class="bg-[var(--app-bg)] text-[var(--app-text)] dark:bg-gray-900 dark:text-gray-100"
```

切换入口统一使用 `useDark()` (from `@vueuse/core`) 同步 `html.dark` 类。

## 主题变量桥接

```typescript
// tailwind.config.ts
export default {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: 'var(--el-color-primary)',
        success: 'var(--el-color-success)',
        warning: 'var(--el-color-warning)',
        danger: 'var(--el-color-danger)',
        info: 'var(--el-color-info)',
      },
    },
  },
}
```

## Element Plus 主题定制（仅管理端）

```scss
// src/assets/styles/element-override.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': ('base': #409eff),
    'success': ('base': #67c23a),
    'warning': ('base': #e6a23c),
    'danger':  ('base': #f56c6c),
  ),
);
```

## 移动端专属工具类

```html
<!-- 触摸目标最小尺寸（WCAG 2.5.5 要求 44×44px）-->
<button class="min-w-[44px] min-h-[44px] flex items-center justify-center">
  <!-- 管理端：<el-icon><Menu /></el-icon> -->
  <!-- 用户端：<MenuIcon class="w-5 h-5" />（Lucide Icons） -->
</button>

<!-- 禁止 hover-only 交互（移动端无 hover）-->
<!-- ❌ -->
<div class="opacity-0 hover:opacity-100">提示文字</div>
<!-- ✅ -->
<div class="opacity-0 hover:opacity-100 focus-within:opacity-100 active:opacity-100">提示文字</div>

<!-- 安全区域（刘海屏、Home Bar）-->
<nav class="pb-[env(safe-area-inset-bottom,16px)]">...</nav>

<!-- 防止移动端双击缩放 -->
<button class="touch-manipulation">点击</button>

<!-- 平滑滚动（iOS 惯性）-->
<div class="overflow-y-auto overscroll-contain [-webkit-overflow-scrolling:touch]">
  ...
</div>
```

## 规则

- 使用 `cn()` 工具合并条件类名 (from `@/utils/cn`)
- 超过 5 个类使用换行
- 必要时使用 `[value]` 自定义值
- 管理端：禁止用 Tailwind 覆盖 Element Plus 组件内部样式（使用 SCSS 变量定制）
- 复杂样式抽取为 `@apply` 指令或组件
- 管理端：Element Plus 组件不加 Tailwind 尺寸类（用 `size` prop）
- 用户端：禁止引入 Element Plus，使用 Headless UI + Tailwind 组合

## 反模式

```vue
<!-- ❌ 管理端：用 Tailwind 强改 Element Plus 内部样式 -->
<el-button class="!bg-red-500 !text-white !border-0">Bad</el-button>

<!-- ✅ 管理端：用 Element Plus props -->
<el-button type="danger">Good</el-button>

<!-- ❌ 用 Element Plus 做布局（两端均禁止） -->
<el-row :gutter="20"><el-col :span="12">...</el-col></el-row>

<!-- ✅ 用 Tailwind 做布局 -->
<div class="grid grid-cols-2 gap-5">...</div>

<!-- ❌ 用户端：引入 Element Plus 组件 -->
<el-button type="primary">禁止</el-button>

<!-- ✅ 用户端：使用 Headless UI + Tailwind -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">正确</button>
```