三、核心概念与语法
3.1 间距系统
Tailwind使用一致的间距比例，每个数值对应0.25rem（4px）的倍数。
方向变体：
p-*：所有方向（padding）
px-*：水平方向（左右）
py-*：垂直方向（上下）
pt-、pr-、pb-、pl-：单侧
<div class="p-4 px-6 py-2 mt-8 mb-4 mx-auto">
组合使用各种间距类
</div>
3.2 颜色系统
Tailwind的颜色系统非常完善，每个色系包含10个梯度（50-900）。
3.3 响应式前缀
Tailwind采用移动优先（mobile-first）设计，即无前缀的类适用于所有屏幕尺寸，前缀类仅在指定断点及以上生效。
<!-- 移动端垂直排列，桌面端水平排列 -->
<div class="flex flex-col md:flex-row">
<div class="w-full md:w-1/2">左侧</div>
<div class="w-full md:w-1/2">右侧</div>
</div>
3.4 状态变体
Tailwind提供了丰富的状态变体，用于处理交互状态。
<!-- 组合示例：中等屏幕以上、悬停时变色 -->
<button class="bg-blue-500 hover:bg-blue-600 md:hover:bg-blue-700">
响应式悬停按钮
</button>
3.5 暗色模式
Tailwind内置了暗色模式支持，通过dark:前缀控制。
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
自适应亮色/暗色模式的内容
</div>
在Tailwind v4中，暗色模式默认启用，无需额外配置。在v3中需要在tailwind.config.js中设置darkMode: "class"。
3.6 布局工具类
Flexbox：
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
<div>项目1</div>
<div>项目2</div>
<div>项目3</div>
</div>
Grid布局：
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>卡片1</div>
<div>卡片2</div>
<div>卡片3</div>
</div>
3.7 排版工具类
<h1 class="text-4xl font-bold text-center mb-8">标题</h1>
<p class="text-gray-600 leading-relaxed">正文内容</p>
<span class="text-sm text-gray-500">辅助文本</span>
3.8 组合变体
http://vbzcj.cn/category/qixiangzhishi.html
Tailwind支持组合多个变体，实现复杂条件样式。
<!-- 中等屏幕以上、父元素悬停时、子元素移动 -->
<div class="group">
<div class="md:group-hover:translate-y-1">
父元素悬停时，在中等屏幕以上向下移动
</div>
</div>
四、主题定制与设计令牌
4.1 v4的CSS优先配置
Tailwind v4使用CSS原生自定义属性（变量）进行配置，无需JavaScript配置文件。
/* 在CSS中定义设计令牌 */
@theme {
--color-primary: #3b82f6;
--color-secondary: #64748b;
--spacing-18: 4.5rem;
--font-brand: "Inter", sans-serif;
}
/* 在所有层中复用 */
.btn {
background-color: var(--color-primary);
padding: var(--spacing-4);
font-family: var(--font-brand);
}
设计令牌的好处：单一真实来源，可在所有层中复用，文档与消费代码保持同步。
4.2 v3的配置文件方式
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#64748b',
},
spacing: {
'18': '4.5rem',
},
fontFamily: {
'brand': ['Inter', 'sans-serif'],
},
},
},
}
4.3 深色模式主题切换
Tailwind CSS配合@dreamer/theme等工具可以方便地实现深色模式切换。
import { createTheme } from "@dreamer/theme";
const theme = createTheme();
theme.setMode("dark"); // 切换到暗色模式
theme.setMode("light"); // 切换到亮色模式
theme.toggle(); // 切换当前模式
Tailwind v4与v3的暗色模式配置差异：
4.4 任意值（Arbitrary Values）
Tailwind允许使用方括号语法使用任意值，但应谨慎使用，以免破坏设计系统的一致性。
<!-- 仅在设计系统无法容纳时使用 -->
<div class="w-[347px] h-[calc(100vh-200px)]">
自定义尺寸
</div>
最佳实践：优先使用设计系统中的值（如w-96而非w-[347px]）。任意值应作为例外而非常规。
来源：
http://vbzcj.cn/
