Skip to content

Commit eb85bcd

Browse files
Yuki-NagoriYuki-Nagori
committed
tailwindv4添加
1 parent 3559c9e commit eb85bcd

File tree

6 files changed

+427
-17
lines changed

6 files changed

+427
-17
lines changed

‎PROJECT_PLAN_YARN.md‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,11 @@
6060
- [ ] 日语内容 (ja) - 🔴 预留
6161
- [ ] 法语内容 (fr) - 🔴 预留
6262
- [ ] 俄语内容 (ru) - 🔴 预留
63-
- [ ] **Tailwind CSS v4 集成**（可选）
64-
- [ ] 配置 Tailwind CSS v4
65-
- [ ] 设计系统/组件库
66-
- [ ] 响应式布局优化
67-
- [ ] 深色模式支持
63+
- [x] **Tailwind CSS v4 集成**（可选）
64+
- [x] 配置 Tailwind CSS v4
65+
- [x] 设计系统/组件库
66+
- [x] 响应式布局优化
67+
- [x] 深色模式支持
6868
- [x] **自动化部署**
6969
- [x] GitHub Actions 配置
7070
- [x] GitHub Pages 部署
@@ -102,7 +102,7 @@ case-lambda/
102102
│ │ ├── config.mts # 主配置 (TypeScript)
103103
│ │ ├── theme/ # 主题配置
104104
│ │ │ ├── index.ts # 扩展默认主题
105-
│ │ │ └── style.css # 自定义样式
105+
│ │ │ └── style.css # 自定义样式（含 Tailwind）
106106
│ │ └── env.d.ts # 类型声明
107107
│ ├── zh/ # 中文内容（默认）✅
108108
│ │ ├── index.md # 首页
@@ -112,7 +112,8 @@ case-lambda/
112112
│ │ │ ├── cli.md
113113
│ │ │ ├── repl.md
114114
│ │ │ ├── modules.md
115-
│ │ │ └── modes.md
115+
│ │ │ ├── modes.md
116+
│ │ │ └── tailwind.md # Tailwind CSS 使用示例
116117
│ │ └── api/ # API 文档
117118
│ │ ├── index.md
118119
│ │ ├── liii/ # Liii 库 (19个文件)
@@ -233,6 +234,21 @@ yarn install
233234
- ✅ 响应式设计
234235
- ✅ 深色/浅色模式
235236
- ✅ 自定义样式通过 `style.css`
237+
- ✅ Tailwind CSS v4 集成
238+
239+
### Tailwind CSS (style.css)
240+
241+
```css
242+
/* Tailwind CSS v4 */
243+
@import "tailwindcss";
244+
245+
/* 暗黑模式：与 VitePress 的 .dark 类同步 */
246+
@custom-variant dark (&:where(.dark, .dark *));
247+
```
248+
249+
- 使用 CSS 优先配置（Tailwind v4 新特性）
250+
- `@custom-variant` 实现与 VitePress 暗黑模式同步
251+
- 编辑器可能对 `@custom-variant` 显示警告，但不影响功能
236252

237253
---
238254

@@ -283,7 +299,9 @@ docs/
283299
"eslint-plugin-vue": "^10.8.0",
284300
"prettier": "^3.8.1",
285301
"vitepress": "^1.6.4",
286-
"vue": "^3.5.32"
302+
"vue": "^3.5.32",
303+
"tailwindcss": "^4.2.2",
304+
"@tailwindcss/vite": "^4.2.2"
287305
}
288306
```
289307

@@ -363,7 +381,7 @@ yarn eslint --print-config eslint.config.js
363381
| 阶段1 | 基础配置 | ✅ 完成 |
364382
| 阶段2 | 文档架构 | ✅ 完成 |
365383
| 阶段3 | 内容编写 | ✅ 完成 |
366-
| 阶段4 | 高级功能 | 🔴 待开始 |
384+
| 阶段4 | 高级功能 | 🟡 进行中 |
367385
| 阶段5 | Playground | 🔴 待调研 |
368386

369387
---
@@ -375,7 +393,8 @@ yarn eslint --print-config eslint.config.js
375393
---
376394

377395
**计划制定者**: 月见八千代
378-
**制定时间**: 2024年4月4日
396+
**制定时间**: 2024年4月4日
397+
**更新时间**: 2026年4月4日
379398
**Yarn 版本**: 1.22.22
380399

381400
> _"一步一步来，基础打好了，后面就顺畅了~"_

‎docs/.vitepress/config.mts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { defineConfig } from 'vitepress'
2+
import tailwindcss from '@tailwindcss/vite'
23

34
// https://vitepress.dev/reference/site-config
45
export default defineConfig({
6+
vite: {
7+
plugins: [tailwindcss()],
8+
},
59
// 构建输出目录 (docs/dist/)
610
outDir: './dist',
711

@@ -168,7 +172,7 @@ export default defineConfig({
168172
},
169173
footer: {
170174
message: '基于 Apache 2.0 许可发布',
171-
copyright: 'Copyright © 2024 Goldfish Scheme Authors',
175+
copyright: 'Copyright © 2026 MoganLab',
172176
},
173177
},
174178
},
@@ -182,7 +186,7 @@ export default defineConfig({
182186
themeConfig: {
183187
footer: {
184188
message: 'Released under the Apache 2.0 License',
185-
copyright: 'Copyright © 2024 Goldfish Scheme Authors',
189+
copyright: 'Copyright © 2026 MoganLab',
186190
},
187191
},
188192
},
@@ -196,7 +200,7 @@ export default defineConfig({
196200
themeConfig: {
197201
footer: {
198202
message: 'Apache 2.0 ライセンスの下で公開',
199-
copyright: 'Copyright © 2024 Goldfish Scheme Authors',
203+
copyright: 'Copyright © 2026 MoganLab',
200204
},
201205
},
202206
},
@@ -210,7 +214,7 @@ export default defineConfig({
210214
themeConfig: {
211215
footer: {
212216
message: 'Publié sous licence Apache 2.0',
213-
copyright: 'Copyright © 2024 Goldfish Scheme Authors',
217+
copyright: 'Copyright © 2026 MoganLab',
214218
},
215219
},
216220
},
@@ -224,7 +228,7 @@ export default defineConfig({
224228
themeConfig: {
225229
footer: {
226230
message: 'Выпущено под лицензией Apache 2.0',
227-
copyright: 'Copyright © 2024 Goldfish Scheme Authors',
231+
copyright: 'Copyright © 2026 MoganLab',
228232
},
229233
},
230234
},

‎docs/.vitepress/theme/style.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
@import "tailwindcss";
2+
3+
/* 暗黑模式：使用 class 策略，与 VitePress 的 .dark 类同步 */
4+
@custom-variant dark (&:where(.dark, .dark *));
5+
16
/* 增大导航栏 logo */
27
.VPNavBarTitle .logo {
38
height: 60px; /* 默认是 24px，调大到 60px */

‎docs/tailwind.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# Tailwind CSS 使用示例
2+
3+
## 基础样式
4+
5+
```markdown
6+
<div class="bg-blue-500 text-white p-4 rounded-lg">
7+
蓝色背景 + 白色文字 + 圆角
8+
</div>
9+
```
10+
11+
<div class="bg-blue-500 text-white p-4 rounded-lg">
12+
蓝色背景 + 白色文字 + 圆角
13+
</div>
14+
15+
## 响应式布局
16+
17+
```markdown
18+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
19+
<div class="bg-gray-100 p-4 rounded">卡片 1</div>
20+
<div class="bg-gray-100 p-4 rounded">卡片 2</div>
21+
<div class="bg-gray-100 p-4 rounded">卡片 3</div>
22+
</div>
23+
```
24+
25+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
26+
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">卡片 1</div>
27+
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">卡片 2</div>
28+
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">卡片 3</div>
29+
</div>
30+
31+
## 暗黑模式
32+
33+
使用 `dark:` 前缀：
34+
35+
```markdown
36+
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-4 rounded">
37+
自动适配浅色/深色模式
38+
</div>
39+
```
40+
41+
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-4 rounded">
42+
自动适配浅色/深色模式
43+
</div>
44+
45+
## 交互状态
46+
47+
```markdown
48+
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-4 py-2 rounded transition-colors">
49+
点击我
50+
</button>
51+
```
52+
53+
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-4 py-2 rounded transition-colors">
54+
点击我
55+
</button>
56+
57+
## 提示框
58+
59+
```markdown
60+
<div class="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-400 p-4 my-4">
61+
<p class="font-bold text-yellow-800 dark:text-yellow-200">提示</p>
62+
<p class="text-yellow-700 dark:text-yellow-300">这是一个提示信息。</p>
63+
</div>
64+
```
65+
66+
<div class="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-400 p-4 my-4">
67+
<p class="font-bold text-yellow-800 dark:text-yellow-200">提示</p>
68+
<p class="text-yellow-700 dark:text-yellow-300">这是一个提示信息。</p>
69+
</div>
70+
71+
## 徽章
72+
73+
```markdown
74+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
75+
New
76+
</span>
77+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
78+
Beta
79+
</span>
80+
```
81+
82+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
83+
New
84+
</span>
85+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
86+
Beta
87+
</span>
88+
89+
## 常用组合
90+
91+
| 效果 | 类名 |
92+
|------|------|
93+
| 居中容器 | `max-w-4xl mx-auto px-4` |
94+
| Flex 居中 | `flex items-center justify-center` |
95+
| 卡片样式 | `bg-white shadow rounded-lg p-6` |
96+
| 文字渐变 | `bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500` |

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@
99
"packageManager": "yarn@1.22.22",
1010
"devDependencies": {
1111
"@eslint/js": "^9.0.0",
12+
"@tailwindcss/vite": "^4.2.2",
1213
"@types/node": "^22.0.0",
13-
"@vue/tsconfig": "^0.9.0",
1414
"@typescript-eslint/parser": "^8.0.0",
15+
"@vue/tsconfig": "^0.9.0",
1516
"eslint": "^10.1.0",
1617
"eslint-plugin-vue": "^10.8.0",
1718
"globals": "^16.0.0",
1819
"prettier": "^3.8.1",
20+
"tailwindcss": "^4.2.2",
1921
"typescript": "^6.0.2",
2022
"typescript-eslint": "^8.0.0",
2123
"vitepress": "^1.6.4",

0 commit comments

Comments
 (0)