186 lines
6.0 KiB
Plaintext
186 lines
6.0 KiB
Plaintext
---
|
||
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>
|
||
```
|