English 中文 العربية 日本語 Português

Tailwind CSS: Tailwind CSS 排版基础：字体、行高与文字样式

1. 字体家族

Tailwind 提供三种默认字体家族：font-sans（无衬线）、font-serif（衬线）、font-mono（等宽），也可以自定义字体。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体家族演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            'chinese': ['"Noto Sans SC"', '"Microsoft YaHei"', 'sans-serif'],
          }
        }
      }
    }
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-3xl mx-auto space-y-8">
    <div class="bg-white p-6 rounded-lg shadow">
      <p class="font-sans text-lg mb-4">font-sans - 无衬线字体 (Sans-serif)</p>
      <p class="font-serif text-lg mb-4">font-serif - 衬线字体 (Serif)</p>
      <p class="font-mono text-lg mb-4">font-mono - 等宽字体 (Monospace)</p>
      <p class="font-chinese text-lg">font-chinese - 自定义中文字体</p>
    </div>

    <!-- 实际应用示例 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="font-sans text-2xl font-bold mb-4">文章标题使用 sans 字体</h2>
      <p class="font-serif text-base leading-relaxed mb-4">
        正文内容使用 serif 字体，适合长文阅读。衬线字体在印刷品中广泛使用，
        能够引导读者视线，提高阅读效率。
      </p>
      <code class="font-mono bg-gray-100 px-2 py-1 rounded text-sm">
        console.log('代码使用 mono 字体');
      </code>
    </div>
  </div>
</body>
</html>
逻辑代码 41 行（超过 40 行限制，仅展示）

字体家族对照表：

类名 字体类型 适用场景
font-sans 无衬线字体 标题、UI 元素
font-serif 衬线字体 正文、长文阅读
font-mono 等宽字体 代码、数据展示

传统 CSS vs Tailwind 传统方式需要定义 font-family 属性并处理字体回退，而 Tailwind 提供开箱即用的字体栈，包含合理的跨平台回退字体。

2. 字体大小

Tailwind 提供从 text-xs（12px）到 text-9xl（128px）的完整字体大小系统。

▶ 示例

HTML 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体大小演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-4">
    <p class="text-xs text-gray-600">text-xs (12px) - 最小字体</p>
    <p class="text-sm text-gray-600">text-sm (14px) - 小字体</p>
    <p class="text-base text-gray-700">text-base (16px) - 默认字体</p>
    <p class="text-lg text-gray-700">text-lg (18px) - 大字体</p>
    <p class="text-xl text-gray-800">text-xl (20px) - 更大字体</p>
    <p class="text-2xl font-semibold">text-2xl (24px)</p>
    <p class="text-3xl font-semibold">text-3xl (30px)</p>
    <p class="text-4xl font-bold">text-4xl (36px)</p>
    <p class="text-5xl font-bold">text-5xl (48px)</p>
    <hr class="my-8">
    
    <!-- 实际应用 -->
    <h1 class="text-4xl font-bold text-gray-900 mb-4">页面主标题</h1>
    <h2 class="text-2xl font-semibold text-gray-800 mb-3">章节标题</h2>
    <h3 class="text-xl font-medium text-gray-700 mb-2">子章节标题</h3>
    <p class="text-base text-gray-600 leading-relaxed">
      正文内容使用默认字体大小，确保良好的阅读体验。
    </p>
    <p class="text-sm text-gray-500 mt-4">注释或辅助文字使用较小字体</p>
  </div>
</body>
</html>
▶ 试一试

字体大小对照表：

类名 尺寸 行高
text-xs 12px 16px
text-sm 14px 20px
text-base 16px 24px
text-lg 18px 28px
text-xl 20px 28px
text-2xl 24px 32px
text-3xl 30px 36px
text-4xl 36px 40px
text-5xl 48px 1
text-6xl 60px 1
text-7xl 72px 1
text-8xl 96px 1
text-9xl 128px 1

传统 CSS vs Tailwind 传统方式需要记住具体的像素值，而 Tailwind 使用语义化的尺寸名称，更易记忆和使用。

💡 提示： 使用任意值语法可以设置任意字体大小，如 text-[22px] 或 text-[1.375rem]。

3. 字体粗细

Tailwind 提供从 font-thin（100）到 font-black（900）的完整字体粗细选项。

▶ 示例

HTML 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体粗细演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-3xl mx-auto space-y-4">
    <p class="font-thin text-xl">font-thin (100) - 极细</p>
    <p class="font-extralight text-xl">font-extralight (200) - 超细</p>
    <p class="font-light text-xl">font-light (300) - 细体</p>
    <p class="font-normal text-xl">font-normal (400) - 正常</p>
    <p class="font-medium text-xl">font-medium (500) - 中等</p>
    <p class="font-semibold text-xl">font-semibold (600) - 半粗</p>
    <p class="font-bold text-xl">font-bold (700) - 粗体</p>
    <p class="font-extrabold text-xl">font-extrabold (800) - 超粗</p>
    <p class="font-black text-xl">font-black (900) - 极粗</p>
    
    <hr class="my-8">
    
    <!-- 实际应用 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="font-bold text-2xl mb-4">粗体用于标题强调</h2>
      <p class="font-normal text-base mb-2">正常字体用于正文内容</p>
      <p class="font-light text-sm text-gray-500">细体用于辅助说明文字</p>
      <span class="font-semibold text-blue-600">半粗用于重要标签</span>
    </div>
  </div>
</body>
</html>
▶ 试一试

传统 CSS vs Tailwind 传统方式需要记住 font-weight: 700 这样的数值，而 Tailwind 使用语义化的名称如 font-bold 更直观。

4. 行高

行高（line-height）控制文本行之间的间距，Tailwind 提供 leading-none 到 leading-loose 的预设选项。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行高演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- 行高对比 -->
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-none (行高 1)</h3>
        <p class="leading-none text-gray-700">
          这段文字使用最小行高，文字行与行之间几乎没有间距。适合用于标题或紧凑的布局场景。
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-tight (行高 1.25)</h3>
        <p class="leading-tight text-gray-700">
          这段文字使用较小行高，适合用于副标题或需要紧凑显示的文本内容区域。
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-normal (行高 1.5)</h3>
        <p class="leading-normal text-gray-700">
          这段文字使用默认行高，是大多数文本内容的理想选择。阅读舒适度和空间利用的平衡点。
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-relaxed (行高 1.625)</h3>
        <p class="leading-relaxed text-gray-700">
          这段文字使用较大行高，适合长文阅读场景。增加的行间距能有效减少视觉疲劳。
        </p>
      </div>
    </div>

    <!-- 数值行高 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">精确数值行高</h3>
      <div class="space-y-4">
        <p class="leading-[1] text-gray-700">leading-[1] - 精确设置为 1</p>
        <p class="leading-[2rem] text-gray-700">leading-[2rem] - 精确设置为 2rem</p>
        <p class="leading-[32px] text-gray-700">leading-[32px] - 精确设置为 32px</p>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 47 行（超过 40 行限制，仅展示）

行高对照表：

类名 行高值 适用场景
leading-none 1 标题、按钮
leading-tight 1.25 副标题
leading-snug 1.375 紧凑文本
leading-normal 1.5 正文默认
leading-relaxed 1.625 长文阅读
leading-loose 2 极宽松间距

传统 CSS vs Tailwind 传统方式需要为不同的文本场景分别设置 line-height 值，而 Tailwind 提供语义化的行高选项，快速选择合适的行距。

5. 文字颜色

Tailwind 提供完整的颜色系统，覆盖所有常见的文字颜色需求。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字颜色演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基础颜色 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">基础文字颜色</h3>
      <div class="space-y-2">
        <p class="text-gray-900">text-gray-900 - 最深灰色</p>
        <p class="text-gray-600">text-gray-600 - 中等灰色</p>
        <p class="text-gray-400">text-gray-400 - 浅灰色</p>
      </div>
    </div>

    <!-- 语义颜色 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">语义化文字颜色</h3>
      <div class="space-y-2">
        <p class="text-blue-600">text-blue-600 - 链接/信息</p>
        <p class="text-green-600">text-green-600 - 成功状态</p>
        <p class="text-yellow-600">text-yellow-600 - 警告状态</p>
        <p class="text-red-600">text-red-600 - 错误状态</p>
        <p class="text-purple-600">text-purple-600 - 特殊强调</p>
      </div>
    </div>

    <!-- 不透明度 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">文字颜色不透明度</h3>
      <div class="space-y-2">
        <p class="text-blue-600 opacity-100">opacity-100 - 完全不透明</p>
        <p class="text-blue-600 opacity-75">opacity-75 - 75% 不透明</p>
        <p class="text-blue-600 opacity-50">opacity-50 - 50% 不透明</p>
        <p class="text-blue-600 opacity-25">opacity-25 - 25% 不透明</p>
      </div>
    </div>

    <!-- 渐变文字 -->
    <div class="bg-gray-900 p-6 rounded-lg">
      <h3 class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 text-3xl font-bold">
        渐变文字效果
      </h3>
    </div>
  </div>
</body>
</html>
逻辑代码 45 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要在 CSS 中定义颜色变量或十六进制值，而 Tailwind 提供语义化的颜色系统（如 text-red-600），直接表达视觉意图。

6. 文字对齐与装饰

Tailwind 提供完整文字对齐和装饰选项，满足各种排版需求。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字对齐与装饰演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 文字对齐 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">文字对齐</h3>
      <div class="space-y-4">
        <p class="text-left bg-gray-100 p-3 rounded">text-left - 左对齐文本</p>
        <p class="text-center bg-gray-100 p-3 rounded">text-center - 居中对齐文本</p>
        <p class="text-right bg-gray-100 p-3 rounded">text-right - 右对齐文本</p>
        <p class="text-justify bg-gray-100 p-3 rounded">
          text-justify - 两端对齐文本。这段文字用于演示两端对齐效果，当文本超过一行时可以看到文字均匀分布在容器中。
        </p>
      </div>
    </div>

    <!-- 文字装饰 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">文字装饰</h3>
      <div class="space-y-4">
        <p class="underline">underline - 下划线文字</p>
        <p class="overline">overline - 上划线文字</p>
        <p class="line-through">line-through - 删除线文字</p>
        <p class="no-underline">no-underline - 无装饰文字</p>
      </div>
    </div>

    <!-- 文字转换 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">文字大小写转换</h3>
      <div class="space-y-4">
        <p class="uppercase">uppercase - 全部大写转换</p>
        <p class="lowercase">LOWERCASE - 全部小写转换</p>
        <p class="capitalize">capitalize - 首字母大写转换</p>
        <p class="normal-case">normal-case - 正常大小写</p>
      </div>
    </div>

    <!-- 装饰颜色和粗细 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">装饰线样式</h3>
      <div class="space-y-4">
        <p class="underline decoration-blue-500">蓝色下划线</p>
        <p class="underline decoration-2">粗下划线 (2px)</p>
        <p class="underline decoration-4 decoration-wavy">波浪装饰线</p>
        <p class="underline decoration-dashed">虚线装饰</p>
        <p class="underline decoration-dotted">点线装饰</p>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 52 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要分别设置 text-align、text-decoration、text-transform 等属性，而 Tailwind 使用简洁的类名如 text-center、underline、uppercase。

7. 列表样式

Tailwind 提供列表样式控制，包括列表标记类型和位置。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表样式演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- 无序列表 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">无序列表样式</h3>
      <ul class="list-disc space-y-2 pl-5">
        <li>list-disc - 实心圆点</li>
        <li>第二个列表项</li>
        <li>第三个列表项</li>
      </ul>
      
      <ul class="list-[square] space-y-2 pl-5 mt-4">
        <li>list-[square] - 实心方块</li>
        <li>使用任意值语法</li>
      </ul>
      
      <ul class="list-none space-y-2 mt-4">
        <li>list-none - 无标记</li>
        <li>适合自定义列表样式</li>
      </ul>
    </div>

    <!-- 有序列表 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">有序列表样式</h3>
      <ol class="list-decimal space-y-2 pl-5">
        <li>list-decimal - 数字编号</li>
        <li>第二个列表项</li>
        <li>第三个列表项</li>
      </ol>
      
      <ol class="list-[upper-alpha] space-y-2 pl-5 mt-4">
        <li>大写字母编号</li>
        <li>list-[upper-alpha]</li>
      </ol>
      
      <ol class="list-[lower-roman] space-y-2 pl-5 mt-4">
        <li>小写罗马数字</li>
        <li>list-[lower-roman]</li>
      </ol>
    </div>

    <!-- 列表位置 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">列表标记位置</h3>
      <ul class="list-disc list-inside space-y-2 bg-gray-100 p-4 rounded">
        <li>list-inside - 标记在内容区域内</li>
        <li>较长的列表项文本会换行到标记下方显示，而不是缩进</li>
      </ul>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">列表标记位置</h3>
      <ul class="list-disc list-outside space-y-2 pl-5 bg-gray-100 p-4 rounded">
        <li>list-outside - 标记在内容区域外</li>
        <li>较长的列表项文本会保持缩进显示</li>
      </ul>
    </div>
  </div>
</body>
</html>
逻辑代码 59 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要设置 list-style-type 和 list-style-position 属性，而 Tailwind 使用 list-disc、list-inside 等简洁类名。

💡 提示： 使用任意值语法可以设置任意列表样式，如 list-[upper-alpha] 或 list-[lower-roman]。

❓ 常见问题

Q 如何在 Tailwind 中使用自定义字体？
A 通过 tailwind.config 的 fontFamily 配置扩展字体族，或使用任意值语法如 font-["MyFont",sans-serif]。记得在 HTML 中引入字体文件或 CDN 链接。
Q text-base 的默认字号是多少？可以修改吗？
A text-base 默认是 16px。可以通过 tailwind.config 的 fontSize 配置修改，或使用 @theme 指令在 CSS 中自定义。
Q 如何实现文字渐变效果？
A 组合使用 text-transparent、bg-clip-text 和 bg-gradient-to-r 等类，将背景渐变裁剪到文字形状上。
Q leading-tight 和 leading-[1.25] 有什么区别？
A 效果完全相同，leading-tight 是预设的语义化名称。建议优先使用预设名称保持一致性，特殊需求才用任意值语法。

📖 小节

📝 作业

  1. ⭐ 创建一个文章页面，包含标题（使用 text-4xl font-bold）、副标题、正文和注释，展示不同字体大小和粗细的搭配

  2. ⭐⭐ 创建一个价格卡片，使用渐变文字显示价格，包含原价（line-through）和折扣价，展示文字装饰的实际应用

  3. ⭐⭐⭐ 创建一个完整的内容页面，要求包含有序和无序列表、引用块、代码块，并实现深色/浅色模式切换下的文字颜色适配

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏