第二章：基础概念精讲 - 第四节 - Tailwind CSS 排版和文本样式

字体系统

1. 字体系列

// tailwind.config.js 默认字体配置
module.exports = {
    theme: {
        fontFamily: {
            'sans': ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont'],
            'serif': ['ui-serif', 'Georgia'],
            'mono': ['ui-monospace', 'SFMono-Regular'],
// 自定义字体
            'display': ['Oswald'],
            'body': ['Open Sans'],
        }
    }
}

2. 字体使用

<!-- 基础字体应用 -->
<div class="font-sans">系统无衬线字体</div>
<div class="font-serif">衬线字体</div>
<div class="font-mono">等宽字体</div>

<!-- 自定义字体 -->
<h1 class="font-display">展示型标题</h1>
<p class="font-body">正文内容</p>

文本样式

1. 字体大小

<!-- 预设字体大小 -->
<h1 class="text-4xl">超大标题</h1>
<h2 class="text-3xl">大标题</h2>
<h3 class="text-2xl">中标题</h3>
<h4 class="text-xl">小标题</h4>
<p class="text-base">正文文本</p>
<span class="text-sm">小号文本</span>
<span class="text-xs">超小文本</span>

2. 字重控制

<!-- 字重变化 -->
<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-extrabold">特粗体 800</p>
<p class="font-black">黑体 900</p>

3. 文本对齐

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

4. 文本装饰

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

<!-- 组合使用 -->
<a class="underline decoration-2 decoration-blue-500 hover:decoration-blue-700">
    自定义下划线
</a>

高级排版特性

1. 行高控制

<!-- 行高设置 -->
<p class="leading-none">紧凑行高</p>
<p class="leading-tight">较紧行高</p>
<p class="leading-normal">正常行高</p>
<p class="leading-relaxed">宽松行高</p>
<p class="leading-loose">超宽行高</p>

<!-- 具体行高值 -->
<p class="leading-8">2rem 行高</p>

2. 字间距

<!-- 字母间距 -->
<p class="tracking-tighter">较紧字间距</p>
<p class="tracking-normal">正常字间距</p>
<p class="tracking-wide">宽字间距</p>

<!-- 单词间距 -->
<p class="space-x-4">
    <span>Word</span>
    <span>Spacing</span>
    <span>Example</span>
</p>

3. 文本溢出处理

<!-- 单行文本溢出 -->
<p class="truncate">
    这是一段很长的文本，将会被截断并显示省略号...
</p>

<!-- 多行文本溢出 -->
<p class="line-clamp-2">
    这是一段很长的多行文本，超过两行的部分将被截断并显示省略号...
</p>

响应式排版

1. 断点适配

<!-- 响应式字体大小 -->
<h1 class="text-2xl md:text-3xl lg:text-4xl">
    响应式标题
</h1>

<!-- 响应式行高 -->
<p class="leading-normal md:leading-relaxed lg:leading-loose">
    响应式行高文本
</p>

2. 文本对齐响应式

<!-- 响应式文本对齐 -->
<p class="text-left md:text-center lg:text-right">
    在不同屏幕尺寸下改变对齐方式的文本
</p>

富文本排版

1. 使用 @apply

/* 富文本样式 */
.prose h1 {
    @apply text-3xl font-bold mb-4;
}

.prose p {
    @apply text-gray-700 leading-relaxed mb-4;
}

.prose a {
    @apply text-blue-600 hover:text-blue-800 underline;
}

2. 列表样式

<!-- 有序列表 -->
<ol class="list-decimal list-inside">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<!-- 无序列表 -->
<ul class="list-disc list-inside">
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

特殊效果

1. 渐变文本

<!-- 文本渐变 -->
<h1 class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500">
    渐变文本效果
</h1>

2. 文本阴影

<!-- 文字阴影 -->
<h2 class="text-4xl font-bold text-white text-shadow">
    带阴影的文本
</h2>

最佳实践

1. 排版规范

• 建立清晰的标题层级
• 保持一致的行高和间距
• 确保文本可读性

2. 响应式策略

• 使用相对单位
• 设置合适的断点
• 考虑移动设备可读性

3. 性能优化

• 合理使用字体加载
• 避免过多字体变体
• 优化文本渲染

总结

Tailwind CSS 的排版和文本样式系统提供了：

1. 完整的字体控制
2. 丰富的文本样式
3. 灵活的响应式设计
4. 强大的特效支持

通过合理运用这些特性，我们可以：

1. 创建专业的排版效果
2. 确保跨设备的可读性
3. 提升用户体验
4. 保持设计的一致性

在实际开发中，应该建立统一的排版规范，并在保证可读性的前提下，灵活运用各种排版特性。