📚 第3章：基础样式与布局

3.1 颜色系统

3.1.1 Tailwind 颜色调色板

Tailwind CSS 提供了一套精心设计的颜色系统，每种颜色都有从 50（最浅）到 950（最深）的渐变级别。

基础颜色

<!-- 灰色系列 -->
<div class="space-y-2">
  <div class="bg-gray-50 p-4 rounded">Gray 50 - 最浅灰</div>
  <div class="bg-gray-100 p-4 rounded">Gray 100</div>
  <div class="bg-gray-200 p-4 rounded">Gray 200</div>
  <div class="bg-gray-300 p-4 rounded">Gray 300</div>
  <div class="bg-gray-400 p-4 rounded text-white">Gray 400</div>
  <div class="bg-gray-500 p-4 rounded text-white">Gray 500 - 标准灰</div>
  <div class="bg-gray-600 p-4 rounded text-white">Gray 600</div>
  <div class="bg-gray-700 p-4 rounded text-white">Gray 700</div>
  <div class="bg-gray-800 p-4 rounded text-white">Gray 800</div>
  <div class="bg-gray-900 p-4 rounded text-white">Gray 900 - 最深灰</div>
  <div class="bg-gray-950 p-4 rounded text-white">Gray 950</div>
</div>

<!-- 彩色系列 -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  <!-- 红色 -->
  <div class="space-y-1">
    <div class="bg-red-100 p-2 rounded text-red-900 text-center text-sm">Red 100</div>
    <div class="bg-red-300 p-2 rounded text-red-900 text-center text-sm">Red 300</div>
    <div class="bg-red-500 p-2 rounded text-white text-center text-sm">Red 500</div>
    <div class="bg-red-700 p-2 rounded text-white text-center text-sm">Red 700</div>
    <div class="bg-red-900 p-2 rounded text-white text-center text-sm">Red 900</div>
  </div>
  
  <!-- 蓝色 -->
  <div class="space-y-1">
    <div class="bg-blue-100 p-2 rounded text-blue-900 text-center text-sm">Blue 100</div>
    <div class="bg-blue-300 p-2 rounded text-blue-900 text-center text-sm">Blue 300</div>
    <div class="bg-blue-500 p-2 rounded text-white text-center text-sm">Blue 500</div>
    <div class="bg-blue-700 p-2 rounded text-white text-center text-sm">Blue 700</div>
    <div class="bg-blue-900 p-2 rounded text-white text-center text-sm">Blue 900</div>
  </div>
  
  <!-- 绿色 -->
  <div class="space-y-1">
    <div class="bg-green-100 p-2 rounded text-green-900 text-center text-sm">Green 100</div>
    <div class="bg-green-300 p-2 rounded text-green-900 text-center text-sm">Green 300</div>
    <div class="bg-green-500 p-2 rounded text-white text-center text-sm">Green 500</div>
    <div class="bg-green-700 p-2 rounded text-white text-center text-sm">Green 700</div>
    <div class="bg-green-900 p-2 rounded text-white text-center text-sm">Green 900</div>
  </div>
  
  <!-- 紫色 -->
  <div class="space-y-1">
    <div class="bg-purple-100 p-2 rounded text-purple-900 text-center text-sm">Purple 100</div>
    <div class="bg-purple-300 p-2 rounded text-purple-900 text-center text-sm">Purple 300</div>
    <div class="bg-purple-500 p-2 rounded text-white text-center text-sm">Purple 500</div>
    <div class="bg-purple-700 p-2 rounded text-white text-center text-sm">Purple 700</div>
    <div class="bg-purple-900 p-2 rounded text-white text-center text-sm">Purple 900</div>
  </div>
</div>

颜色应用类型

<!-- 背景颜色 -->
<div class="bg-blue-500 text-white p-4 rounded">
  背景颜色：bg-blue-500
</div>

<!-- 文字颜色 -->
<p class="text-red-600 font-semibold">
  文字颜色：text-red-600
</p>

<!-- 边框颜色 -->
<div class="border-2 border-green-400 p-4 rounded">
  边框颜色：border-green-400
</div>

<!-- 阴影颜色 -->
<div class="bg-white p-6 rounded-lg shadow-lg shadow-blue-500/25">
  带颜色的阴影：shadow-blue-500/25
</div>

<!-- 环形颜色（focus 状态） -->
<input 
  type="text" 
  class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
  placeholder="聚焦时的环形颜色"
>

3.1.2 颜色透明度

<!-- 使用斜杠语法设置透明度 -->
<div class="space-y-4">
  <div class="bg-blue-500/100 p-4 rounded text-white">100% 不透明</div>
  <div class="bg-blue-500/75 p-4 rounded text-white">75% 透明度</div>
  <div class="bg-blue-500/50 p-4 rounded text-white">50% 透明度</div>
  <div class="bg-blue-500/25 p-4 rounded text-gray-800">25% 透明度</div>
  <div class="bg-blue-500/10 p-4 rounded text-gray-800">10% 透明度</div>
</div>

<!-- 文字透明度 -->
<div class="space-y-2">
  <p class="text-gray-900/100">完全不透明的文字</p>
  <p class="text-gray-900/75">75% 透明度的文字</p>
  <p class="text-gray-900/50">50% 透明度的文字</p>
  <p class="text-gray-900/25">25% 透明度的文字</p>
</div>

3.1.3 颜色最佳实践

<!-- 语义化颜色使用 -->
<div class="space-y-4">
  <!-- 成功状态 -->
  <div class="bg-green-50 border border-green-200 text-green-800 p-4 rounded-md">
    <div class="flex items-center">
      <svg class="w-5 h-5 text-green-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
      操作成功完成！
    </div>
  </div>
  
  <!-- 警告状态 -->
  <div class="bg-yellow-50 border border-yellow-200 text-yellow-800 p-4 rounded-md">
    <div class="flex items-center">
      <svg class="w-5 h-5 text-yellow-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
      请注意这个重要信息！
    </div>
  </div>
  
  <!-- 错误状态 -->
  <div class="bg-red-50 border border-red-200 text-red-800 p-4 rounded-md">
    <div class="flex items-center">
      <svg class="w-5 h-5 text-red-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
      </svg>
      发生了一个错误！
    </div>
  </div>
  
  <!-- 信息状态 -->
  <div class="bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded-md">
    <div class="flex items-center">
      <svg class="w-5 h-5 text-blue-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
      </svg>
      这是一条提示信息。
    </div>
  </div>
</div>

3.2 间距系统

3.2.1 间距单位

Tailwind CSS 使用基于 0.25rem（4px）的间距系统：

<!-- 间距对照表 -->
<div class="space-y-4">
  <div class="bg-blue-100 p-1 rounded">p-1 = 0.25rem (4px)</div>
  <div class="bg-blue-200 p-2 rounded">p-2 = 0.5rem (8px)</div>
  <div class="bg-blue-300 p-3 rounded">p-3 = 0.75rem (12px)</div>
  <div class="bg-blue-400 p-4 rounded text-white">p-4 = 1rem (16px)</div>
  <div class="bg-blue-500 p-6 rounded text-white">p-6 = 1.5rem (24px)</div>
  <div class="bg-blue-600 p-8 rounded text-white">p-8 = 2rem (32px)</div>
  <div class="bg-blue-700 p-12 rounded text-white">p-12 = 3rem (48px)</div>
  <div class="bg-blue-800 p-16 rounded text-white">p-16 = 4rem (64px)</div>
</div>

3.2.2 内边距（Padding）

<!-- 全方向内边距 -->
<div class="bg-gray-200 p-4 rounded mb-4">
  <div class="bg-white rounded">p-4：全方向内边距</div>
</div>

<!-- 特定方向内边距 -->
<div class="space-y-4">
  <!-- 垂直内边距 -->
  <div class="bg-gray-200 py-6 px-2 rounded">
    <div class="bg-white rounded text-center">py-6：垂直内边距</div>
  </div>
  
  <!-- 水平内边距 -->
  <div class="bg-gray-200 px-8 py-2 rounded">
    <div class="bg-white rounded text-center">px-8：水平内边距</div>
  </div>
  
  <!-- 单独方向内边距 -->
  <div class="bg-gray-200 pt-8 pr-4 pb-2 pl-6 rounded">
    <div class="bg-white rounded text-center">
      pt-8 pr-4 pb-2 pl-6：各方向不同内边距
    </div>
  </div>
</div>

3.2.3 外边距（Margin）

<!-- 外边距示例 -->
<div class="bg-gray-100 p-4 rounded">
  <div class="bg-blue-500 text-white p-4 rounded mb-4">
    第一个元素（mb-4）
  </div>
  <div class="bg-green-500 text-white p-4 rounded mx-8">
    第二个元素（mx-8）
  </div>
  <div class="bg-red-500 text-white p-4 rounded mt-6">
    第三个元素（mt-6）
  </div>
</div>

<!-- 负边距 -->
<div class="bg-gray-100 p-8 rounded">
  <div class="bg-blue-500 text-white p-4 rounded">
    正常元素
  </div>
  <div class="bg-red-500 text-white p-4 rounded -mt-2">
    负边距元素（-mt-2）
  </div>
</div>

<!-- 自动边距（居中） -->
<div class="bg-gray-100 p-4 rounded">
  <div class="bg-blue-500 text-white p-4 rounded w-64 mx-auto">
    水平居中（mx-auto）
  </div>
</div>

3.2.4 空间分布（Space Between）

<!-- 垂直空间分布 -->
<div class="space-y-4">
  <div class="bg-blue-500 text-white p-4 rounded">元素 1</div>
  <div class="bg-green-500 text-white p-4 rounded">元素 2</div>
  <div class="bg-red-500 text-white p-4 rounded">元素 3</div>
</div>

<!-- 水平空间分布 -->
<div class="flex space-x-4">
  <div class="bg-blue-500 text-white p-4 rounded">元素 1</div>
  <div class="bg-green-500 text-white p-4 rounded">元素 2</div>
  <div class="bg-red-500 text-white p-4 rounded">元素 3</div>
</div>

<!-- 响应式空间分布 -->
<div class="space-y-2 md:space-y-0 md:space-x-4 md:flex">
  <div class="bg-purple-500 text-white p-4 rounded">响应式元素 1</div>
  <div class="bg-pink-500 text-white p-4 rounded">响应式元素 2</div>
  <div class="bg-indigo-500 text-white p-4 rounded">响应式元素 3</div>
</div>

3.3 字体和排版

3.3.1 字体大小

<!-- 字体大小系列 -->
<div class="space-y-2">
  <p class="text-xs">text-xs：超小文本 (12px)</p>
  <p class="text-sm">text-sm：小文本 (14px)</p>
  <p class="text-base">text-base：基础文本 (16px)</p>
  <p class="text-lg">text-lg：大文本 (18px)</p>
  <p class="text-xl">text-xl：超大文本 (20px)</p>
  <p class="text-2xl">text-2xl：2倍大文本 (24px)</p>
  <p class="text-3xl">text-3xl：3倍大文本 (30px)</p>
  <p class="text-4xl">text-4xl：4倍大文本 (36px)</p>
  <p class="text-5xl">text-5xl：5倍大文本 (48px)</p>
  <p class="text-6xl">text-6xl：6倍大文本 (60px)</p>
</div>

3.3.2 字体粗细

<!-- 字体粗细 -->
<div class="space-y-2">
  <p class="font-thin">font-thin：极细 (100)</p>
  <p class="font-extralight">font-extralight：超细 (200)</p>
  <p class="font-light">font-light：细 (300)</p>
  <p class="font-normal">font-normal：正常 (400)</p>
  <p class="font-medium">font-medium：中等 (500)</p>
  <p class="font-semibold">font-semibold：半粗 (600)</p>
  <p class="font-bold">font-bold：粗体 (700)</p>
  <p class="font-extrabold">font-extrabold：超粗 (800)</p>
  <p class="font-black">font-black：极粗 (900)</p>
</div>

3.3.3 行高和字间距

<!-- 行高 -->
<div class="space-y-4">
  <div>
    <h3 class="font-semibold mb-2">紧密行高 (leading-tight)</h3>
    <p class="leading-tight text-gray-600">
      这是一段使用紧密行高的文本。行与行之间的距离比较小，适合标题或者需要紧凑显示的内容。这种行高设置可以让文本看起来更加紧凑。
    </p>
  </div>
  
  <div>
    <h3 class="font-semibold mb-2">正常行高 (leading-normal)</h3>
    <p class="leading-normal text-gray-600">
      这是一段使用正常行高的文本。这是默认的行高设置，在大多数情况下都能提供良好的可读性。适合正文内容的显示。
    </p>
  </div>
  
  <div>
    <h3 class="font-semibold mb-2">宽松行高 (leading-relaxed)</h3>
    <p class="leading-relaxed text-gray-600">
      这是一段使用宽松行高的文本。行与行之间有更多的空间，这样可以提高长文本的可读性，特别适合文章正文或者需要长时间阅读的内容。
    </p>
  </div>
</div>

<!-- 字间距 -->
<div class="space-y-4">
  <p class="tracking-tighter">tracking-tighter：更紧密的字间距</p>
  <p class="tracking-tight">tracking-tight：紧密的字间距</p>
  <p class="tracking-normal">tracking-normal：正常的字间距</p>
  <p class="tracking-wide">tracking-wide：宽松的字间距</p>
  <p class="tracking-wider">tracking-wider：更宽松的字间距</p>
  <p class="tracking-widest">tracking-widest：最宽松的字间距</p>
</div>

3.3.4 文本对齐和装饰

<!-- 文本对齐 -->
<div class="space-y-4">
  <p class="text-left bg-gray-100 p-4 rounded">左对齐文本 (text-left)</p>
  <p class="text-center bg-gray-100 p-4 rounded">居中对齐文本 (text-center)</p>
  <p class="text-right bg-gray-100 p-4 rounded">右对齐文本 (text-right)</p>
  <p class="text-justify bg-gray-100 p-4 rounded">
    两端对齐文本 (text-justify)。这段文本会在两端对齐，单词之间的空间会被调整以使每行的开始和结束都对齐到容器的边缘。
  </p>
</div>

<!-- 文本装饰 -->
<div class="space-y-2">
  <p class="underline">下划线文本 (underline)</p>
  <p class="line-through">删除线文本 (line-through)</p>
  <p class="no-underline text-blue-600">移除下划线 (no-underline)</p>
  <p class="uppercase">大写文本 (uppercase)</p>
  <p class="lowercase">LOWERCASE TEXT (lowercase)</p>
  <p class="capitalize">首字母大写文本 (capitalize)</p>
</div>

<!-- 文本溢出处理 -->
<div class="space-y-4">
  <div class="w-64">
    <p class="truncate bg-gray-100 p-2 rounded">
      这是一段很长的文本，会被截断并显示省略号 (truncate)
    </p>
  </div>
  
  <div class="w-64">
    <p class="overflow-hidden bg-gray-100 p-2 rounded">
      这是一段很长的文本，会被隐藏超出部分 (overflow-hidden)
    </p>
  </div>
</div>

3.4 布局基础

3.4.1 显示类型

<!-- 块级元素 -->
<div class="space-y-4">
  <div class="block bg-blue-500 text-white p-4 rounded">
    块级元素 (block) - 占据整行
  </div>
  <div class="block bg-green-500 text-white p-4 rounded">
    另一个块级元素
  </div>
</div>

<!-- 内联元素 -->
<div class="space-y-4 mt-8">
  <div>
    <span class="inline bg-red-500 text-white px-2 py-1 rounded">内联元素</span>
    <span class="inline bg-purple-500 text-white px-2 py-1 rounded">另一个内联元素</span>
    <span class="inline bg-pink-500 text-white px-2 py-1 rounded">第三个内联元素</span>
  </div>
</div>

<!-- 内联块元素 -->
<div class="space-y-4 mt-8">
  <div>
    <div class="inline-block bg-yellow-500 text-white p-4 rounded mr-2">
      内联块元素 1
    </div>
    <div class="inline-block bg-orange-500 text-white p-4 rounded mr-2">
      内联块元素 2
    </div>
    <div class="inline-block bg-red-500 text-white p-4 rounded">
      内联块元素 3
    </div>
  </div>
</div>

<!-- 隐藏元素 -->
<div class="space-y-4 mt-8">
  <div class="bg-gray-500 text-white p-4 rounded">可见元素</div>
  <div class="hidden bg-gray-500 text-white p-4 rounded">隐藏元素 (hidden)</div>
  <div class="bg-gray-500 text-white p-4 rounded">另一个可见元素</div>
</div>

3.4.2 定位

<!-- 相对定位 -->
<div class="relative bg-gray-200 h-32 rounded">
  <div class="absolute top-4 left-4 bg-blue-500 text-white p-2 rounded">
    绝对定位元素 (top-4 left-4)
  </div>
  <div class="absolute bottom-4 right-4 bg-red-500 text-white p-2 rounded">
    绝对定位元素 (bottom-4 right-4)
  </div>
  <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-green-500 text-white p-2 rounded">
    居中定位
  </div>
</div>

<!-- 固定定位示例 -->
<div class="relative bg-gray-100 h-64 overflow-hidden rounded mt-8">
  <div class="h-96 bg-gradient-to-b from-blue-400 to-purple-600 p-4">
    <p class="text-white">滚动内容区域</p>
    <div class="fixed bottom-4 right-4 bg-yellow-500 text-black p-2 rounded shadow-lg">
      固定定位按钮
    </div>
  </div>
</div>

<!-- 粘性定位 -->
<div class="h-64 overflow-y-auto bg-gray-100 rounded mt-8">
  <div class="sticky top-0 bg-white border-b border-gray-300 p-4 font-semibold">
    粘性头部 (sticky top-0)
  </div>
  <div class="p-4 space-y-4">
    <p>内容区域 1</p>
    <p>内容区域 2</p>
    <p>内容区域 3</p>
    <p>内容区域 4</p>
    <p>内容区域 5</p>
    <p>内容区域 6</p>
    <p>内容区域 7</p>
    <p>内容区域 8</p>
  </div>
</div>

3.4.3 尺寸控制

<!-- 宽度 -->
<div class="space-y-4">
  <div class="w-1/4 bg-blue-500 text-white p-2 rounded">w-1/4 (25%)</div>
  <div class="w-1/2 bg-green-500 text-white p-2 rounded">w-1/2 (50%)</div>
  <div class="w-3/4 bg-red-500 text-white p-2 rounded">w-3/4 (75%)</div>
  <div class="w-full bg-purple-500 text-white p-2 rounded">w-full (100%)</div>
</div>

<!-- 固定宽度 -->
<div class="space-y-4 mt-8">
  <div class="w-32 bg-yellow-500 text-white p-2 rounded">w-32 (128px)</div>
  <div class="w-64 bg-orange-500 text-white p-2 rounded">w-64 (256px)</div>
  <div class="w-96 bg-pink-500 text-white p-2 rounded">w-96 (384px)</div>
</div>

<!-- 高度 -->
<div class="flex space-x-4 mt-8">
  <div class="h-16 w-16 bg-blue-500 rounded flex items-center justify-center text-white text-xs">
    h-16
  </div>
  <div class="h-24 w-16 bg-green-500 rounded flex items-center justify-center text-white text-xs">
    h-24
  </div>
  <div class="h-32 w-16 bg-red-500 rounded flex items-center justify-center text-white text-xs">
    h-32
  </div>
</div>

<!-- 最大/最小尺寸 -->
<div class="space-y-4 mt-8">
  <div class="max-w-xs bg-gray-300 p-4 rounded">
    max-w-xs：最大宽度限制，内容会自动换行当超过最大宽度时。
  </div>
  <div class="min-h-24 bg-gray-400 p-4 rounded">
    min-h-24：最小高度限制
  </div>
</div>

3.4.4 溢出控制

<!-- 溢出处理 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <!-- 隐藏溢出 -->
  <div class="h-32 overflow-hidden bg-gray-100 p-4 rounded">
    <h3 class="font-semibold mb-2">overflow-hidden</h3>
    <p>这是一段很长的文本内容，当内容超出容器高度时会被隐藏。这段文本会继续很长很长，直到超出容器的高度限制。</p>
  </div>
  
  <!-- 滚动溢出 -->
  <div class="h-32 overflow-auto bg-gray-100 p-4 rounded">
    <h3 class="font-semibold mb-2">overflow-auto</h3>
    <p>这是一段很长的文本内容，当内容超出容器高度时会显示滚动条。这段文本会继续很长很长，你可以滚动查看所有内容。</p>
    <p>这里还有更多内容...</p>
    <p>继续添加内容来演示滚动效果。</p>
  </div>
</div>

<!-- 水平溢出 -->
<div class="w-64 overflow-x-auto bg-gray-100 p-4 rounded mt-4">
  <div class="w-96 bg-blue-500 text-white p-4 rounded">
    这个元素比容器宽，会产生水平滚动条
  </div>
</div>

3.5 实践案例：个人资料卡片

让我们创建一个综合运用所学样式的个人资料卡片：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料卡片 - Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br from-purple-100 to-blue-100 min-h-screen py-8">
    <div class="max-w-md mx-auto">
        <!-- 个人资料卡片 -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
            <!-- 头部背景 -->
            <div class="h-32 bg-gradient-to-r from-purple-500 to-pink-500 relative">
                <div class="absolute inset-0 bg-black bg-opacity-20"></div>
                <!-- 头像 -->
                <div class="absolute -bottom-12 left-1/2 transform -translate-x-1/2">
                    <div class="w-24 h-24 bg-white rounded-full p-1 shadow-lg">
                        <div class="w-full h-full bg-gradient-to-br from-blue-400 to-purple-600 rounded-full flex items-center justify-center">
                            <span class="text-white text-2xl font-bold">张</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 个人信息 -->
            <div class="pt-16 pb-8 px-8">
                <!-- 姓名和职位 -->
                <div class="text-center mb-6">
                    <h1 class="text-2xl font-bold text-gray-900 mb-1">张三</h1>
                    <p class="text-gray-600 text-sm">前端开发工程师</p>
                    <p class="text-gray-500 text-xs mt-1">@zhangsan</p>
                </div>
                
                <!-- 统计信息 -->
                <div class="flex justify-center space-x-8 mb-6">
                    <div class="text-center">
                        <div class="text-xl font-bold text-gray-900">1.2k</div>
                        <div class="text-xs text-gray-500 uppercase tracking-wide">关注者</div>
                    </div>
                    <div class="text-center">
                        <div class="text-xl font-bold text-gray-900">856</div>
                        <div class="text-xs text-gray-500 uppercase tracking-wide">关注中</div>
                    </div>
                    <div class="text-center">
                        <div class="text-xl font-bold text-gray-900">42</div>
                        <div class="text-xs text-gray-500 uppercase tracking-wide">项目</div>
                    </div>
                </div>
                
                <!-- 个人简介 -->
                <div class="mb-6">
                    <p class="text-gray-600 text-sm leading-relaxed text-center">
                        热爱前端开发，专注于用户体验设计。喜欢探索新技术，分享开发经验。
                    </p>
                </div>
                
                <!-- 技能标签 -->
                <div class="mb-6">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3">技能</h3>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">
                            JavaScript
                        </span>
                        <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">
                            Vue.js
                        </span>
                        <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-xs font-medium">
                            React
                        </span>
                        <span class="bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-xs font-medium">
                            Tailwind CSS
                        </span>
                        <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-xs font-medium">
                            Node.js
                        </span>
                    </div>
                </div>
                
                <!-- 联系信息 -->
                <div class="space-y-3 mb-6">
                    <div class="flex items-center text-sm text-gray-600">
                        <svg class="w-4 h-4 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                        </svg>
                        zhangsan@example.com
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <svg class="w-4 h-4 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                        </svg>
                        北京，中国
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <svg class="w-4 h-4 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
                        </svg>
                        加入于 2020年3月
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="flex space-x-3">
                    <button class="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold py-3 px-4 rounded-lg hover:from-purple-600 hover:to-pink-600 transition duration-200 transform hover:scale-105">
                        关注
                    </button>
                    <button class="flex-1 border border-gray-300 text-gray-700 font-semibold py-3 px-4 rounded-lg hover:bg-gray-50 transition duration-200">
                        消息
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 最近活动 -->
        <div class="mt-6 bg-white rounded-2xl shadow-xl p-6">
            <h2 class="text-lg font-bold text-gray-900 mb-4">最近活动</h2>
            <div class="space-y-4">
                <div class="flex items-start space-x-3">
                    <div class="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
                    <div>
                        <p class="text-sm text-gray-800">提交了新的代码到 <span class="font-semibold">awesome-project</span></p>
                        <p class="text-xs text-gray-500 mt-1">2小时前</p>
                    </div>
                </div>
                <div class="flex items-start space-x-3">
                    <div class="w-2 h-2 bg-blue-500 rounded-full mt-2 flex-shrink-0"></div>
                    <div>
                        <p class="text-sm text-gray-800">发布了新文章：《Tailwind CSS 最佳实践》</p>
                        <p class="text-xs text-gray-500 mt-1">1天前</p>
                    </div>
                </div>
                <div class="flex items-start space-x-3">
                    <div class="w-2 h-2 bg-purple-500 rounded-full mt-2 flex-shrink-0"></div>
                    <div>
                        <p class="text-sm text-gray-800">参与了开源项目 <span class="font-semibold">tailwindcss</span> 的讨论</p>
                        <p class="text-xs text-gray-500 mt-1">3天前</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

3.6 本章总结

在本章中，我们学习了 Tailwind CSS 的基础样式系统：

核心要点

1. 颜色系统：完整的颜色调色板，支持透明度控制
2. 间距系统：基于 4px 的一致性间距体系
3. 字体排版：丰富的字体大小、粗细和排版选项
4. 布局基础：显示类型、定位、尺寸控制等基础布局工具

最佳实践

• 使用语义化的颜色搭配
• 保持间距的一致性
• 合理选择字体大小和行高
• 注意溢出处理和响应式设计

下一步

在下一章中，我们将学习 Flexbox 和 Grid 布局系统，这是现代网页布局的核心技术。

3.7 练习题

1. 颜色练习：创建一套品牌色彩系统，包括主色、辅助色和状态色
2. 排版练习：设计一个文章页面，展示不同层级的标题和正文
3. 布局练习：使用定位创建一个固定导航栏和侧边栏的布局

练习提示

• 注意颜色的对比度和可访问性
• 保持排版的层次感和可读性
• 考虑不同屏幕尺寸下的布局效果