核心工具类体系

1. 名词解释：JIT、PurgeCSS 与原子类

• JIT 引擎 Just-In-Time 即时编译引擎。v2 时代 Tailwind 会预生成所有可能的工具类（CSS 文件可达数 MB），JIT 改为按需生成：扫描源码中实际使用的类名，只生成这些类对应的 CSS。开发中改动后毫秒级响应。
• PurgeCSS 一个独立的 CSS 优化工具，扫描 HTML/JS 文件，移除未使用的 CSS 选择器，大幅减小生产 CSS 文件体积。Tailwind v3+ 内置了类似机制（content 配置），v4 通过 Oxide 引擎进一步优化。
• 原子类 又称 Atomic CSS，每个类只做一件事、只设置一个 CSS 属性（或少数相关属性）。理念来自 "single responsibility principle"（单一职责原则）在 CSS 设计中的应用。
• design token 设计系统中的最小设计决策单元，如品牌色 #06B6D4、基础间距 4px、字体 Inter。Tailwind 将这些 token 映射为工具类（bg-cyan-500、p-1），保证整个项目设计的一致性。

2. Spacing 间距系统

Tailwind 的间距系统基于 4px 基准单位（1 spacing = 0.25rem = 4px），所有 margin、padding、gap 均基于此比例。

类名	值	用途
p-0	padding: 0	清除内边距
p-1	padding: 0.25rem (4px)	极小内边距
p-2	padding: 0.5rem (8px)	小内边距
p-4	padding: 1rem (16px)	标准内边距
p-6	padding: 1.5rem (24px)	卡片常用
p-8	padding: 2rem (32px)	宽松内边距
px-4	padding-left/right: 1rem	水平内边距
py-2	padding-top/bottom: 0.5rem	垂直内边距
mt-4	margin-top: 1rem	上外边距
-mt-2	margin-top: -0.5rem	负外边距
gap-4	gap: 1rem	flex/grid 间距
space-y-4	相邻子元素 margin-top: 1rem	垂直列表间距

<!-- 常见的卡片布局间距组合 -->
<div class="p-6 mx-auto max-w-lg">          <!-- 内边距6，水平居中，最大宽度 -->
  <ul class="space-y-3">                    <!-- 列表项垂直间距 -->
    <li class="flex items-center gap-3 p-3"> <!-- flex行，间距3 -->
      <span>Item 1</span>
    </li>
  </ul>
</div>

3. Typography 排版

Tailwind 提供完整的字体大小、字重、行高、字母间距工具类，覆盖所有排版需求。

字体大小

<!-- 字体大小：从 xs 到 9xl -->
<p class="text-xs">text-xs: 12px</p>      <!-- 0.75rem -->
<p class="text-sm">text-sm: 14px</p>      <!-- 0.875rem -->
<p class="text-base">text-base: 16px</p>  <!-- 1rem, 默认 -->
<p class="text-lg">text-lg: 18px</p>      <!-- 1.125rem -->
<p class="text-xl">text-xl: 20px</p>      <!-- 1.25rem -->
<p class="text-2xl">text-2xl: 24px</p>    <!-- 1.5rem -->
<p class="text-4xl">text-4xl: 36px</p>    <!-- 2.25rem -->
<p class="text-6xl">text-6xl: 60px</p>    <!-- 3.75rem -->

<!-- 字体粗细 -->
<span class="font-thin">100</span>
<span class="font-normal">400</span>
<span class="font-semibold">600</span>
<span class="font-bold">700</span>
<span class="font-black">900</span>

<!-- 行高、字母间距、文本对齐 -->
<p class="leading-relaxed tracking-wide text-center">
  leading-relaxed = line-height: 1.625
  tracking-wide = letter-spacing: 0.025em
</p>

4. Colors 颜色系统

Tailwind v4 使用 oklch 色彩空间（感知均匀色彩模型），相比 v3 的 hex 颜色，视觉一致性更好。内置调色板包含 22 种颜色 × 11 个亮度级别（50-950）。

<!-- 颜色工具类格式：{属性}-{颜色}-{亮度} -->

<!-- 文字颜色 -->
<p class="text-gray-900">深灰色文字</p>
<p class="text-cyan-500">青色文字</p>
<p class="text-white">白色文字</p>

<!-- 背景颜色 -->
<div class="bg-cyan-500">青色背景</div>
<div class="bg-gray-100">浅灰背景</div>

<!-- 边框颜色 -->
<div class="border border-cyan-300">青色边框</div>

<!-- 不透明度修饰符（v3+ 特性，v4 继续支持）-->
<div class="bg-cyan-500/20">20% 不透明度的青色背景</div>
<p class="text-black/60">60% 不透明度的黑色文字</p>

5. Layout 布局

Flexbox

<!-- 基础 flex 布局 -->
<div class="flex items-center justify-between gap-4">
  <!-- flex: 启用 flexbox
       items-center: align-items: center（交叉轴居中）
       justify-between: justify-content: space-between（两端对齐）
       gap-4: gap: 1rem（子元素间距）-->
  <div>左侧内容</div>
  <div>右侧内容</div>
</div>

<!-- 垂直排列（flex-col）-->
<div class="flex flex-col items-center gap-6">
  <div>第一行</div>
  <div>第二行</div>
</div>

<!-- flex 子项控制 -->
<div class="flex gap-4">
  <div class="flex-1">占据剩余空间</div>     <!-- flex: 1 1 0% -->
  <div class="flex-none w-40">固定宽度</div> <!-- flex: none -->
</div>

Grid

<!-- 固定列数 Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>列1</div>
  <div>列2</div>
  <div>列3</div>
</div>

<!-- 自适应列数（最小 200px，尽量多列）-->
<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
  <!-- 等同于 CSS: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) -->
</div>

<!-- 跨列 / 跨行 -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">占两列</div>
  <div class="col-span-1">一列</div>
  <div class="col-span-1 row-span-2">跨两行</div>
</div>

6. Sizing 尺寸

<!-- 宽度 / 高度 -->
<div class="w-full">100% 宽度</div>
<div class="w-1/2">50% 宽度</div>
<div class="w-64">16rem (256px) 固定宽度</div>
<div class="w-screen">100vw 视口宽度</div>

<!-- 最大 / 最小宽度 -->
<div class="max-w-sm">最大 24rem (384px)</div>
<div class="max-w-md">最大 28rem (448px)</div>
<div class="max-w-xl">最大 36rem (576px)</div>
<div class="max-w-7xl mx-auto">页面最大宽度容器</div>

<!-- 高度 -->
<div class="h-screen">100vh 全屏高度</div>
<div class="h-64">固定高度 16rem</div>
<div class="min-h-screen">最小全屏高度（内容多时自适应）</div>

7. Display / Position / Overflow

<!-- Display -->
<div class="block">     display: block</div>
<span class="inline">    display: inline</span>
<div class="inline-flex"> display: inline-flex</div>
<div class="hidden">     display: none（隐藏）</div>

<!-- Position -->
<div class="relative">
  <div class="absolute top-0 right-0 w-4 h-4">
    <!-- 绝对定位，右上角 -->
  </div>
</div>
<div class="fixed bottom-6 right-6">悬浮按钮</div>
<nav class="sticky top-0 z-50">吸顶导航</nav>

<!-- Overflow -->
<div class="overflow-hidden">隐藏溢出内容</div>
<div class="overflow-auto">内容溢出时显示滚动条</div>
<div class="overflow-x-scroll">水平滚动</div>

<!-- 文本截断 -->
<p class="truncate">超出宽度的文本将显示省略号...</p>
<p class="line-clamp-3">最多显示3行，超出省略</p>