更新公告
......
01 - Tailwind 基础概念
一、定位
Tailwind CSS 属于工具类优先方案，本科时用 Bootstrap，但 Tailwind 明显更灵活一些。 核心思路偏向小颗粒样式拼装。
二、总览与导航
| 概念 | 说明 | 常见类名 |
|---|---|---|
| 工具类 Utility | 页面样式由原子类拼装 | flex items-center rounded-lg |
| 响应式前缀 | 按断点覆写样式 | sm: md: lg: xl: |
| 颜色与尺寸 | 使用预设色阶与字号尺度 | bg-blue-500 text-lg |
| 间距 Spacing | 管理内外边距 | p-4 px-6 mt-3 |
| 布局 Layout | 控制流式与网格布局 | flex grid grid-cols-3 |
| 文本样式 | 字重、对齐、变换、行高 | font-semibold text-center |
| 背景与边框 | 背景色、边框、圆角、阴影 | bg-slate-100 border shadow |
| 状态前缀 | 交互态与可访问态 | hover: focus: active: |
| 尺寸与可见性 | 宽高与最小最大尺寸 | w-64 h-40 min-h-screen |
| 暗色模式 Dark Mode | 暗色主题样式覆盖 | dark:bg-slate-900 |
三、工具类 Utility
示例代码：
html
<div class="mx-auto max-w-md rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
<h3 class="text-lg font-semibold text-slate-900">漂泊者战斗简报</h3>
<p class="mt-2 text-sm text-slate-600">今日副本通关 24 次</p>
</div>渲染效果：
漂泊者战斗简报
今日副本通关 24 次
四、响应式前缀
示例代码：
html
<div class="grid grid-cols-1 gap-3 md:grid-cols-3">
<div class="rounded-lg bg-sky-100 p-4 text-sky-900">角色面板</div>
<div class="rounded-lg bg-emerald-100 p-4 text-emerald-900">装备面板</div>
<div class="rounded-lg bg-amber-100 p-4 text-amber-900">任务面板</div>
</div>渲染效果：
角色面板
装备面板
任务面板
窗口变宽后列数会变化。
五、颜色与尺寸
示例代码：
html
<div class="space-y-2">
<p class="text-sm text-slate-500">text-sm 与 text-slate-500</p>
<p class="text-lg font-medium text-indigo-600">text-lg 与 text-indigo-600</p>
<p class="text-2xl font-bold text-rose-600">text-2xl 与 text-rose-600</p>
</div>渲染效果：
text-sm 与 text-slate-500
text-lg 与 text-indigo-600
text-2xl 与 text-rose-600
六、间距 Spacing
示例代码：
html
<div class="rounded-xl border border-slate-200 p-4">
<div class="mb-3 rounded bg-slate-100 px-4 py-2 text-gray-800">每日任务</div>
<div class="mt-2 rounded bg-slate-100 px-4 py-2 text-gray-800">周常任务</div>
</div>渲染效果：
每日任务
周常任务
七、布局 Layout
1. Flex 布局
示例代码：
html
<div class="flex items-center rounded-lg border border-slate-200 p-4">
<span class="grow-0 text-slate-700">服务器列表：</span>
<div class="ml-auto flex items-center gap-2">
<span class="rounded bg-slate-900 px-2 py-1 text-xs text-white">服务器 1</span>
<span class="rounded bg-slate-900 px-2 py-1 text-xs text-white">服务器 2</span>
<span class="rounded bg-slate-900 px-2 py-1 text-xs text-white">服务器 3</span>
</div>
</div>渲染效果：
服务器列表：
服务器 1服务器 2服务器 3
2. Grid 布局
示例代码：
html
<div class="grid grid-cols-4 gap-2">
<div class="col-span-2 rounded bg-cyan-100 p-3 text-gray-800">活动横幅</div>
<div class="rounded bg-cyan-100 p-3 text-gray-800">公告</div>
<div class="rounded bg-cyan-100 p-3 text-gray-800">邮件</div>
<div class="rounded bg-cyan-100 p-3 text-gray-800">任务</div>
<div class="col-span-2 rounded bg-cyan-100 p-3 text-gray-800">...</div>
<div class="rounded bg-cyan-100 p-3 text-gray-800">提示</div>
</div>渲染效果：
活动横幅
公告
邮件
任务
...
提示
八、文本样式
示例代码：
html
<article class="rounded-lg border border-slate-200 p-5">
<h4 class="text-center text-xl font-bold uppercase tracking-wide text-slate-900">更新公告</h4>
<p class="mt-2 text-justify leading-7 text-slate-600">
......
</p>
</article>渲染效果：
九、背景与边框
示例代码：
html
<div class="rounded-2xl border border-indigo-200 bg-indigo-50 p-5 shadow-sm">
<p class="text-indigo-900">暗色主题下可能不明显</p>
</div>渲染效果：
暗色主题下可能不明显
十、悬停与状态前缀
示例代码：
html
<div class="py-1">
<button class="rounded-xl bg-teal-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-400 active:scale-95">按钮</button>
</div>渲染效果：
鼠标悬停、键盘聚焦、按下状态均可触发交互。
十一、尺寸与可见性
示例代码：
html
<div class="space-y-2">
<div class="h-16 w-64 rounded bg-slate-200"></div>
<div class="h-16 w-64 rounded bg-slate-300 invisible"></div>
<div class="h-16 w-64 rounded bg-slate-400"></div>
</div>渲染效果：
第二块占位仍在，视觉区域隐藏。
十二、暗色模式 Dark Mode
示例代码：
html
<div class="rounded-xl border border-slate-200 bg-white p-4 text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
界面配色自动切换
</div>渲染效果：
界面配色自动切换
卡片复用
同一组视觉规则可用于其他页。