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

// 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'],
        }
    }
}

<!-- 基础字体应用 -->
<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>

<!-- 预设字体大小 -->
<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>

<!-- 字重变化 -->
<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>

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

<!-- 文本装饰 -->
<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>

<!-- 行高设置 -->
<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>

<!-- 字母间距 -->
<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>

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

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

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

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

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

/* 富文本样式 */
.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;
}

<!-- 有序列表 -->
<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>

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

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