库洛新人TJY入职笔记

明/暗主题

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>

渲染效果：

第二块占位仍在，视觉区域隐藏。

十二、明暗模式 ​

示例代码：

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">
	点击右上角切换明暗主题后，激活dark属性，文本的颜色对应发生变化
</div>
点击右上角切换明暗主题后，激活dark属性，文本与背景边框的颜色对应发生变化