第 3 章：样式与美化

Haiyue2025/9/1大约 11 分钟

第 3 章：样式与美化

学习目标

掌握颜色系统和自定义颜色配置
学会字体、文本和排版相关工具类
熟练使用边框、阴影和背景效果
了解过渡和动画工具类的使用

颜色系统

内置颜色调色板

Tailwind CSS 提供了丰富的颜色系统，每种颜色都有 10 个色调（50-900）：

<!-- 灰色系 -->
<div class="bg-gray-50">浅灰</div>
<div class="bg-gray-100">更浅灰</div>
<div class="bg-gray-500">中灰</div>
<div class="bg-gray-900">深灰</div>

<!-- 颜色系列 -->
<div class="bg-red-500">红色</div>
<div class="bg-blue-500">蓝色</div>
<div class="bg-green-500">绿色</div>
<div class="bg-yellow-500">黄色</div>
<div class="bg-purple-500">紫色</div>
<div class="bg-pink-500">粉色</div>
<div class="bg-indigo-500">靛蓝</div>

颜色应用场景

<!-- 背景颜色 -->
<div class="bg-blue-500">蓝色背景</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600">渐变背景</div>

<!-- 文本颜色 -->
<p class="text-red-500">红色文本</p>
<p class="text-gray-700">深灰色文本</p>

<!-- 边框颜色 -->
<div class="border border-green-500">绿色边框</div>

<!-- 占位符颜色 -->
<input type="text" placeholder="请输入..." class="placeholder-gray-400">

<!-- 环形颜色（focus 等状态） -->
<button class="focus:ring-2 focus:ring-blue-500">聚焦时显示蓝色光环</button>

颜色透明度

<!-- 透明度变体 -->
<div class="bg-red-500">不透明红色</div>
<div class="bg-red-500/75">75% 透明度红色</div>
<div class="bg-red-500/50">50% 透明度红色</div>
<div class="bg-red-500/25">25% 透明度红色</div>
<div class="bg-red-500/10">10% 透明度红色</div>

<!-- 文本透明度 -->
<p class="text-black/90">90% 不透明度文本</p>
<p class="text-black/60">60% 不透明度文本</p>
<p class="text-black/30">30% 不透明度文本</p>

自定义颜色

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // 添加自定义颜色
        'brand-blue': '#1e40af',
        'brand-gray': '#6b7280',
        // 添加颜色系列
        'custom': {
          50: '#f8fafc',
          100: '#f1f5f9',
          500: '#64748b',
          900: '#0f172a',
        }
      }
    }
  }
}

<!-- 使用自定义颜色 -->
<div class="bg-brand-blue">品牌蓝色</div>
<div class="bg-custom-500">自定义颜色</div>

文本和排版

字体系列

<!-- 字体系列 -->
<p class="font-sans">Sans-serif 字体</p>
<p class="font-serif">Serif 字体</p>
<p class="font-mono">Monospace 字体</p>

<!-- 自定义字体配置 -->

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'custom': ['Inter', 'system-ui', 'sans-serif'],
        'chinese': ['PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']
      }
    }
  }
}

字体大小和行高

<!-- 字体大小 -->
<p class="text-xs">极小文本 (12px)</p>
<p class="text-sm">小文本 (14px)</p>
<p class="text-base">基础文本 (16px)</p>
<p class="text-lg">大文本 (18px)</p>
<p class="text-xl">特大文本 (20px)</p>
<p class="text-2xl">2倍大文本 (24px)</p>
<p class="text-3xl">3倍大文本 (30px)</p>
<p class="text-4xl">4倍大文本 (36px)</p>

<!-- 行高 -->
<p class="leading-tight">紧密行高</p>
<p class="leading-normal">正常行高</p>
<p class="leading-loose">宽松行高</p>
<p class="leading-6">固定行高 24px</p>

字体粗细和样式

<!-- 字体粗细 -->
<p class="font-thin">极细 (100)</p>
<p class="font-light">细 (300)</p>
<p class="font-normal">正常 (400)</p>
<p class="font-medium">中等 (500)</p>
<p class="font-semibold">半粗 (600)</p>
<p class="font-bold">粗体 (700)</p>
<p class="font-black">极粗 (900)</p>

<!-- 字体样式 -->
<p class="italic">斜体文本</p>
<p class="not-italic">非斜体文本</p>

文本装饰和变换

<!-- 文本装饰 -->
<p class="underline">下划线文本</p>
<p class="overline">上划线文本</p>
<p class="line-through">删除线文本</p>
<p class="no-underline">无装饰文本</p>

<!-- 文本变换 -->
<p class="uppercase">大写文本</p>
<p class="lowercase">小写文本</p>
<p class="capitalize">首字母大写</p>
<p class="normal-case">正常大小写</p>

文本对齐和处理

<!-- 文本对齐 -->
<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>

<!-- 文本溢出处理 -->
<div class="w-32">
  <p class="truncate">这是一段很长的文本，会被截断并显示省略号</p>
</div>

<div class="w-32">
  <p class="overflow-hidden">
    <span class="line-clamp-2">
      这是一段很长的文本，会在两行后被截断并显示省略号
    </span>
  </p>
</div>

<!-- 空白字符处理 -->
<p class="whitespace-nowrap">不换行文本</p>
<p class="whitespace-normal">正常换行</p>
<p class="whitespace-pre">保持空白格式</p>

文字排版实例

<!-- 文章标题组合 -->
<div class="mb-8">
  <h1 class="text-4xl font-bold text-gray-900 mb-2">
    文章主标题
  </h1>
  <h2 class="text-xl font-medium text-gray-600 mb-4">
    副标题描述
  </h2>
  <div class="flex items-center text-sm text-gray-500 space-x-4">
    <span>作者：张三</span>
    <span>•</span>
    <span>发布时间：2024-01-15</span>
    <span>•</span>
    <span>阅读时间：5 分钟</span>
  </div>
</div>

<!-- 段落文本 -->
<div class="prose max-w-none">
  <p class="text-base leading-7 text-gray-700 mb-4">
    这是文章的第一段内容，使用了合适的字体大小、行高和颜色，
    确保良好的阅读体验。段落之间有适当的间距。
  </p>
  <p class="text-base leading-7 text-gray-700 mb-4">
    第二段内容继续保持一致的样式风格。
  </p>
</div>

边框和阴影

边框宽度和样式

<!-- 边框宽度 -->
<div class="border">默认边框 1px</div>
<div class="border-0">无边框</div>
<div class="border-2">2px 边框</div>
<div class="border-4">4px 边框</div>
<div class="border-8">8px 边框</div>

<!-- 单边边框 -->
<div class="border-t-2">顶部边框</div>
<div class="border-r-2">右边框</div>
<div class="border-b-2">底部边框</div>
<div class="border-l-2">左边框</div>

<!-- 边框样式 -->
<div class="border-2 border-solid">实线边框</div>
<div class="border-2 border-dashed">虚线边框</div>
<div class="border-2 border-dotted">点线边框</div>
<div class="border-2 border-double">双线边框</div>

圆角

<!-- 圆角大小 -->
<div class="rounded">小圆角</div>
<div class="rounded-md">中等圆角</div>
<div class="rounded-lg">大圆角</div>
<div class="rounded-xl">特大圆角</div>
<div class="rounded-full">完全圆形</div>

<!-- 单角圆角 -->
<div class="rounded-t-lg">顶部圆角</div>
<div class="rounded-r-lg">右侧圆角</div>
<div class="rounded-b-lg">底部圆角</div>
<div class="rounded-l-lg">左侧圆角</div>

<!-- 单个角圆角 -->
<div class="rounded-tl-lg">左上角</div>
<div class="rounded-tr-lg">右上角</div>
<div class="rounded-bl-lg">左下角</div>
<div class="rounded-br-lg">右下角</div>

阴影效果

<!-- 盒阴影 -->
<div class="shadow-sm">小阴影</div>
<div class="shadow">默认阴影</div>
<div class="shadow-md">中等阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-xl">特大阴影</div>
<div class="shadow-2xl">超大阴影</div>

<!-- 内阴影 -->
<div class="shadow-inner">内阴影</div>

<!-- 无阴影 -->
<div class="shadow-none">无阴影</div>

<!-- 阴影颜色 -->
<div class="shadow-lg shadow-red-500/25">红色阴影</div>
<div class="shadow-lg shadow-blue-500/25">蓝色阴影</div>

边框和阴影组合应用

<!-- 卡片组件 -->
<div class="bg-white rounded-lg border border-gray-200 shadow-md hover:shadow-lg transition-shadow p-6">
  <h3 class="text-lg font-semibold text-gray-900 mb-2">卡片标题</h3>
  <p class="text-gray-600 mb-4">卡片内容描述...</p>
  <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
    查看详情
  </button>
</div>

<!-- 输入框样式 -->
<input 
  type="text" 
  placeholder="请输入内容..." 
  class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm 
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
         transition-colors"
>

<!-- 按钮变体 -->
<div class="space-x-4">
  <!-- 主要按钮 -->
  <button class="px-4 py-2 bg-blue-500 text-white rounded-md shadow hover:bg-blue-600 hover:shadow-md transition-all">
    主要按钮
  </button>
  
  <!-- 次要按钮 -->
  <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
    次要按钮
  </button>
  
  <!-- 危险按钮 -->
  <button class="px-4 py-2 bg-red-500 text-white rounded-md shadow hover:bg-red-600 hover:shadow-md transition-all">
    危险按钮
  </button>
</div>

背景和渐变

背景颜色和图片

<!-- 背景颜色 -->
<div class="bg-blue-500">纯色背景</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600">渐变背景</div>

<!-- 背景图片 -->
<div class="bg-cover bg-center bg-no-repeat" style="background-image: url('image.jpg')">
  <!-- 或者使用 Tailwind 的背景工具类 -->
</div>

<!-- 背景尺寸 -->
<div class="bg-auto">自动尺寸</div>
<div class="bg-cover">覆盖</div>
<div class="bg-contain">包含</div>

<!-- 背景位置 -->
<div class="bg-center">居中</div>
<div class="bg-top">顶部</div>
<div class="bg-right">右侧</div>

渐变背景

<!-- 线性渐变 -->
<div class="bg-gradient-to-r from-red-500 to-blue-500">左到右渐变</div>
<div class="bg-gradient-to-b from-green-400 to-blue-500">上到下渐变</div>
<div class="bg-gradient-to-br from-pink-500 to-orange-400">对角渐变</div>

<!-- 三色渐变 -->
<div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
  三色渐变
</div>

<!-- 径向渐变（需要自定义） -->

// tailwind.config.js - 添加自定义渐变
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      }
    }
  }
}

复杂背景应用

<!-- Hero 区域 -->
<div class="relative min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900">
  <!-- 背景图案或纹理 -->
  <div class="absolute inset-0 bg-black/20"></div>
  
  <!-- 内容 -->
  <div class="relative z-10 flex items-center justify-center min-h-screen text-center text-white">
    <div class="max-w-4xl mx-auto px-4">
      <h1 class="text-5xl md:text-7xl font-bold mb-6">
        欢迎来到我们的网站
      </h1>
      <p class="text-xl md:text-2xl text-white/90 mb-8">
        创造未来，从这里开始
      </p>
      <button class="px-8 py-4 bg-white text-gray-900 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
        立即开始
      </button>
    </div>
  </div>
</div>

<!-- 特色区域背景 -->
<section class="py-20 bg-gray-50 bg-gradient-to-b from-white to-gray-100">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">
      我们的特色
    </h2>
    <!-- 内容... -->
  </div>
</section>

过渡和动画

CSS 过渡

<!-- 基本过渡 -->
<button class="transition-colors duration-300 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  颜色过渡
</button>

<!-- 多属性过渡 -->
<button class="transition-all duration-300 bg-blue-500 hover:bg-blue-600 hover:scale-105 text-white px-4 py-2 rounded shadow hover:shadow-lg">
  综合过渡
</button>

<!-- 过渡持续时间 -->
<div class="transition-all duration-75">75ms 过渡</div>
<div class="transition-all duration-150">150ms 过渡</div>
<div class="transition-all duration-300">300ms 过渡</div>
<div class="transition-all duration-500">500ms 过渡</div>
<div class="transition-all duration-1000">1000ms 过渡</div>

<!-- 过渡延迟 -->
<div class="transition-all duration-300 delay-75">延迟 75ms</div>
<div class="transition-all duration-300 delay-150">延迟 150ms</div>

<!-- 过渡缓动函数 -->
<div class="transition-all duration-300 ease-linear">线性过渡</div>
<div class="transition-all duration-300 ease-in">缓入</div>
<div class="transition-all duration-300 ease-out">缓出</div>
<div class="transition-all duration-300 ease-in-out">缓入缓出</div>

变换效果

<!-- 缩放 -->
<div class="transform scale-95 hover:scale-100 transition-transform">缩放效果</div>
<div class="transform hover:scale-110 transition-transform">放大效果</div>

<!-- 旋转 -->
<div class="transform hover:rotate-12 transition-transform">旋转效果</div>
<div class="transform hover:rotate-180 transition-transform">180度旋转</div>

<!-- 平移 -->
<div class="transform hover:translate-x-4 transition-transform">水平移动</div>
<div class="transform hover:translate-y-4 transition-transform">垂直移动</div>
<div class="transform hover:translate-x-4 hover:translate-y-4 transition-transform">对角移动</div>

<!-- 倾斜 -->
<div class="transform hover:skew-x-12 transition-transform">X轴倾斜</div>
<div class="transform hover:skew-y-12 transition-transform">Y轴倾斜</div>

内置动画

<!-- 脉冲动画 -->
<div class="animate-pulse bg-gray-300 h-4 rounded"></div>

<!-- 弹跳动画 -->
<div class="animate-bounce bg-blue-500 w-6 h-6 rounded-full"></div>

<!-- 旋转动画 -->
<div class="animate-spin w-6 h-6 border-2 border-gray-300 border-t-blue-500 rounded-full"></div>

<!-- 乒乓动画 -->
<div class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></div>

交互式动画示例

<!-- 按钮悬停效果 -->
<button class="group relative px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
  <span class="relative z-10">立即开始</span>
  <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</button>

<!-- 卡片悬停效果 -->
<div class="group bg-white rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden">
  <div class="relative overflow-hidden">
    <img src="image.jpg" alt="图片" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  </div>
  <div class="p-6">
    <h3 class="text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
      卡片标题
    </h3>
    <p class="text-gray-600 mt-2">卡片描述内容...</p>
    <div class="mt-4 transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
      <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
        查看更多
      </button>
    </div>
  </div>
</div>

<!-- 加载指示器 -->
<div class="flex items-center justify-center space-x-2">
  <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>
  <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
  <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
</div>

动画最佳实践

性能考量：优先使用 CSS 变换而非改变布局属性
用户体验：动画应该增强而非干扰用户体验
可访问性：尊重用户的动画偏好设置
适度使用：避免过度使用动画导致页面混乱

小结

通过本章学习，你应该掌握了：

颜色系统：Tailwind 的完整颜色调色板和透明度控制
排版工具：字体、大小、粗细、对齐等文本控制
边框和阴影：创建视觉层次和深度效果
背景效果：纯色、渐变和图片背景的应用
动画过渡：为用户交互添加流畅的视觉反馈

这些样式工具类让你能够创建美观、现代化的用户界面。下一章我们将学习 Tailwind CSS 的进阶特性，包括自定义指令和组件抽取。