---
alwaysApply: false
---
## Tailwind CSS 规则
这个文件定义了项目中使用的 Tailwind CSS 变量和工具类规则。

相关文件：
- 主样式文件：`src/css/tailwindcss.css` - 包含所有 Tailwind 变量和工具类定义

### 渐变色工具类

以下是可用的渐变色工具类：

- `bg-primary-gradient-normal`: 主色渐变（正常状态）
  - 从 magenta-30 到 purple-40 的左到右渐变
- `bg-primary-gradient-hover`: 主色渐变（悬停状态）
  - 从 magenta-20 到 purple-30 的左到右渐变
- `bg-primary-gradient-press`: 主色渐变（按下状态）
  - 从 magenta-40 到 purple-50 的左到右渐变
- `bg-primary-gradient-disabled`: 主色渐变（禁用状态）

- `bg-context-subscribe-normal`: 订阅按钮渐变（正常状态）
  - 从 purple-50 到 violet-50 的左到右渐变
- `bg-context-subscribe-hover`: 订阅按钮渐变（悬停状态）
  - 从 purple-30 到 violet-30 的左到右渐变
- `bg-context-subscribe-press`: 订阅按钮渐变（按下状态）
  - 从 purple-70 到 violet-70 的左到右渐变

- `bg-context-vip-normal`: VIP 渐变
  - 从 sky-20(0%) 到 violet-40(60%) 到 purple-30(100%) 的左到右渐变

- `bg-context-recharge-normal`: 充值按钮渐变
  - 从 yellow-0 到 yellow-70 的左到右渐变

### 字体工具类

Display 字体系列：
- `txt-display-l`: 
  - 字体：Oleo Script Swash Caps
  - 大小：64px
  - 行高：80px
  - 字重：Regular (400)

- `txt-display-m`:
  - 字体：Oleo Script Swash Caps
  - 大小：48px
  - 行高：56px
  - 字重：Regular (400)

- `txt-display-s`:
  - 字体：Oleo Script Swash Caps
  - 大小：24px
  - 行高：28px
  - 字重：Regular (400)

标题字体系列：
- `txt-headline-l`:
  - 字体：Poppins
  - 大小：48px
  - 行高：56px
  - 字重：Bold (700)

- `txt-headline-m`:
  - 字体：Poppins
  - 大小：36px
  - 行高：48px
  - 字重：Bold (700)

正文字体系列：
- `txt-body-l`:
  - 字体：Poppins
  - 大小：16px
  - 行高：24px
  - 字重：Regular (400)

- `txt-body-m`:
  - 字体：Poppins
  - 大小：14px
  - 行高：20px
  - 字重：Regular (400)

- `txt-body-s`:
  - 字体：Poppins
  - 大小：12px
  - 行高：20px
  - 字重：Regular (400)

标签字体系列：
- `txt-label-l`:
  - 字体：Poppins
  - 大小：16px
  - 行高：24px
  - 字重：Medium (500)

- `txt-label-m`:
  - 字体：Poppins
  - 大小：14px
  - 行高：20px
  - 字重：Medium (500)

- `txt-label-s`:
  - 字体：Poppins
  - 大小：12px
  - 行高：20px
  - 字重：Medium (500)

数字显示字体系列：
- `txt-numDisplay-xl`:
  - 字体：Display Number Font
  - 大小：64px
  - 行高：80px
  - 字重：Bold (700)

- `txt-numDisplay-l`:
  - 字体：Display Number Font
  - 大小：48px
  - 行高：56px
  - 字重：Bold (700)

等宽数字字体系列：
- `txt-numMonotype-xl`:
  - 字体：Poppins
  - 大小：24px
  - 行高：28px
  - 字重：Bold (700)

- `txt-numMonotype-l`:
  - 字体：Poppins
  - 大小：20px
  - 行高：24px
  - 字重：Bold (700)

### 使用说明

1. 渐变色使用：
```tsx
<div className="bg-primary-gradient-normal hover:bg-primary-gradient-hover">
  // 内容
</div>
```

2. 字体使用：
```tsx
<h1 className="txt-display-l">大标题</h1>
<p className="txt-body-l">正文内容</p>
<span className="txt-numDisplay-xl">12345</span>
```

3. 响应式设计：
所有工具类都支持响应式前缀：
- sm: ≥768px
- md: ≥1024px
- lg: ≥1280px
- xl: ≥1536px

例如：
```tsx
<h1 className="txt-display-s md:txt-display-m lg:txt-display-l">
  响应式标题
</h1>
```