162 lines
3.5 KiB
Plaintext
162 lines
3.5 KiB
Plaintext
|
---
|
|||
|
|
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>
|
|||
|
|
```
|