排版样式

Tailwind CSS 提供了丰富的排版工具类，用于控制文字的字体、大小、颜色、对齐等样式。本章将详细介绍这些工具类的使用方法。

字体族

Tailwind 默认提供三种字体族：sans-serif、serif 和 monospace。

基本用法

<p class="font-sans">无衬线字体（默认）</p>
<p class="font-serif">衬线字体</p>
<p class="font-mono">等宽字体</p>

自定义字体

在配置文件中添加自定义字体：

export default {
  theme: {
    extend: {
      fontFamily: {
        'display': ['Oswald', 'sans-serif'],
        'body': ['Open Sans', 'sans-serif'],
      },
    },
  },
}

然后在 HTML 中使用：

<h1 class="font-display">自定义显示字体</h1>
<p class="font-body">自定义正文字体</p>

<p class="text-xs">超小号文字 (0.75rem)</p>
<p class="text-sm">小号文字 (0.875rem)</p>
<p class="text-base">基础大小 (1rem)</p>
<p class="text-lg">大号文字 (1.125rem)</p>
<p class="text-xl">超大号文字 (1.25rem)</p>
<p class="text-2xl">2xl 大小 (1.5rem)</p>
<p class="text-3xl">3xl 大小 (1.875rem)</p>
<p class="text-4xl">4xl 大小 (2.25rem)</p>
<p class="text-5xl">5xl 大小 (3rem)</p>
<p class="text-6xl">6xl 大小 (3.75rem)</p>
<p class="text-7xl">7xl 大小 (4.5rem)</p>
<p class="text-8xl">8xl 大小 (6rem)</p>
<p class="text-9xl">9xl 大小 (8rem)</p>

字体大小对照表

类名	大小	行高
text-xs	0.75rem (12px)	1rem
text-sm	0.875rem (14px)	1.25rem
text-base	1rem (16px)	1.5rem
text-lg	1.125rem (18px)	1.75rem
text-xl	1.25rem (20px)	1.75rem
text-2xl	1.5rem (24px)	2rem
text-3xl	1.875rem (30px)	2.25rem
text-4xl	2.25rem (36px)	2.5rem

字体粗细

控制文字的粗细程度：

<p class="font-thin">极细 (100)</p>
<p class="font-extralight">特细 (200)</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>

文字颜色

Tailwind 提供了丰富的颜色系统，每种颜色有多个色阶。

基本用法

<p class="text-black">黑色文字</p>
<p class="text-white">白色文字</p>
<p class="text-gray-500">灰色文字</p>
<p class="text-red-500">红色文字</p>
<p class="text-blue-500">蓝色文字</p>
<p class="text-green-500">绿色文字</p>
<p class="text-yellow-500">黄色文字</p>
<p class="text-purple-500">紫色文字</p>
<p class="text-pink-500">粉色文字</p>
<p class="text-indigo-500">靛蓝色文字</p>

颜色色阶

每种颜色从浅到深有多个色阶：50、100、200、300、400、500、600、700、800、900、950。

<div class="flex gap-1">
  <div class="bg-blue-50 w-8 h-8"></div>
  <div class="bg-blue-100 w-8 h-8"></div>
  <div class="bg-blue-200 w-8 h-8"></div>
  <div class="bg-blue-300 w-8 h-8"></div>
  <div class="bg-blue-400 w-8 h-8"></div>
  <div class="bg-blue-500 w-8 h-8"></div>
  <div class="bg-blue-600 w-8 h-8"></div>
  <div class="bg-blue-700 w-8 h-8"></div>
  <div class="bg-blue-800 w-8 h-8"></div>
  <div class="bg-blue-900 w-8 h-8"></div>
  <div class="bg-blue-950 w-8 h-8"></div>
</div>

透明度

使用斜杠语法设置颜色透明度：

<p class="text-blue-500/50">50% 透明度</p>
<p class="text-blue-500/75">75% 透明度</p>
<p class="text-blue-500/90">90% 透明度</p>

文字对齐

控制文字的水平对齐方式：

<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>
<p class="text-start">起点对齐（支持 RTL）</p>
<p class="text-end">终点对齐（支持 RTL）</p>

行高

控制文字的行高：

<p class="leading-none">行高 1</p>
<p class="leading-tight">行高 1.25</p>
<p class="leading-snug">行高 1.375</p>
<p class="leading-normal">行高 1.5（默认）</p>
<p class="leading-relaxed">行高 1.625</p>
<p class="leading-loose">行高 2</p>

也可以使用数值：

<p class="leading-4">行高 1rem</p>
<p class="leading-6">行高 1.5rem</p>
<p class="leading-8">行高 2rem</p>

字间距

控制字母之间的间距：

<p class="tracking-tighter">更紧凑 (-0.05em)</p>
<p class="tracking-tight">紧凑 (-0.025em)</p>
<p class="tracking-normal">正常 (0)</p>
<p class="tracking-wide">宽松 (0.025em)</p>
<p class="tracking-wider">更宽松 (0.05em)</p>
<p class="tracking-widest">最宽松 (0.1em)</p>

文字装饰

添加文字装饰效果：

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

装饰线样式

<p class="underline decoration-solid">实线</p>
<p class="underline decoration-double">双线</p>
<p class="underline decoration-dotted">点线</p>
<p class="underline decoration-dashed">虚线</p>
<p class="underline decoration-wavy">波浪线</p>

装饰线颜色

<p class="underline decoration-blue-500">蓝色下划线</p>
<p class="underline decoration-red-500">红色下划线</p>

装饰线粗细

<p class="underline decoration-1">1px</p>
<p class="underline decoration-2">2px</p>
<p class="underline decoration-4">4px</p>

文字转换

控制文字的大小写转换：

<p class="uppercase">UPPERCASE</p>
<p class="lowercase">lowercase</p>
<p class="capitalize">Capitalize Each Word</p>
<p class="normal-case">Normal Case</p>

文字缩进

控制首行缩进：

<p class="indent-0">无缩进</p>
<p class="indent-4">缩进 1rem</p>
<p class="indent-8">缩进 2rem</p>

文字溢出

处理文字溢出容器的情况：

截断文字

<p class="truncate">
  这是一段很长的文字，会被截断并显示省略号
</p>

truncate 相当于：

overflow: hidden
text-overflow: ellipsis
white-space: nowrap

限制行数

<p class="line-clamp-2">
  这是一段很长的文字，会被限制在两行内显示，超出部分显示省略号。这是一段很长的文字，会被限制在两行内显示。
</p>
<p class="line-clamp-3">
  限制在三行内显示。
</p>

文字阴影

为文字添加阴影效果：

<p class="text-shadow-sm">小阴影</p>
<p class="text-shadow">普通阴影</p>
<p class="text-shadow-lg">大阴影</p>
<p class="text-shadow-none">无阴影</p>

空白处理

控制空白字符的处理方式：

<p class="whitespace-normal">正常处理空白</p>
<p class="whitespace-nowrap">不换行</p>
<p class="whitespace-pre">保留空白和换行</p>
<p class="whitespace-pre-line">保留换行，合并空白</p>
<p class="whitespace-pre-wrap">保留空白和换行，自动换行</p>
<p class="whitespace-break-spaces">保留所有空白</p>

换行控制

控制文字换行方式：

<p class="break-normal">正常换行</p>
<p class="break-words">允许在任意位置换行</p>
<p class="break-all">允许在任意字符处换行</p>
<p class="break-keep">不允许换行（CJK 文字）</p>

垂直对齐

控制行内元素的垂直对齐：

<span class="align-baseline">基线对齐</span>
<span class="align-top">顶部对齐</span>
<span class="align-middle">中部对齐</span>
<span class="align-bottom">底部对齐</span>
<span class="align-text-top">文字顶部对齐</span>
<span class="align-text-bottom">文字底部对齐</span>
<span class="align-sub">下标对齐</span>
<span class="align-super">上标对齐</span>

实战示例

标题样式

<h1 class="text-4xl font-bold text-gray-900 tracking-tight">
  文章标题
</h1>
<h2 class="text-3xl font-semibold text-gray-800 mt-8">
  章节标题
</h2>
<h3 class="text-2xl font-medium text-gray-700 mt-6">
  小节标题
</h3>

引用样式

<blockquote class="border-l-4 border-blue-500 pl-4 italic text-gray-600">
  这是一段引用文字，左侧有蓝色边框作为装饰。
</blockquote>

代码样式

<code class="font-mono text-sm bg-gray-100 px-2 py-1 rounded">
  console.log('Hello, World!')
</code>

<pre class="font-mono text-sm bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
function greet(name) {
  return `Hello, ${name}!`;
}
</pre>

链接样式

<a href="#" class="text-blue-600 hover:text-blue-800 hover:underline">
  普通链接
</a>

<a href="#" class="text-blue-600 hover:text-blue-800 underline decoration-blue-300 underline-offset-2">
  带下划线的链接
</a>

标签样式

<span class="inline-block bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">
  标签
</span>

<span class="inline-block bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">
  徽章
</span>

小结

本章介绍了 Tailwind CSS 的排版工具类：

字体族：控制文字的字体类型
字体大小：使用比例系统设置文字大小
字体粗细：从细到粗共 9 个级别
文字颜色：丰富的颜色系统和透明度控制
文字对齐：左、中、右、两端对齐
行高和字间距：精细控制文字排版
文字装饰：下划线、删除线等效果
文字溢出：截断和行数限制
空白处理：控制换行和空白字符

下一章，我们将学习 Tailwind CSS 的颜色系统。

字体族​

基本用法​

自定义字体​

字体大小​

基本用法​

字体大小对照表​

字体粗细​

文字颜色​

基本用法​

颜色色阶​

透明度​

文字对齐​

行高​

字间距​

文字装饰​

装饰线样式​

装饰线颜色​

装饰线粗细​

文字转换​

文字缩进​

文字溢出​

截断文字​

限制行数​

文字阴影​

空白处理​

换行控制​

垂直对齐​

实战示例​

标题样式​

引用样式​

代码样式​

链接样式​

标签样式​

小结​

字体族

基本用法

自定义字体

字体大小

基本用法

字体大小对照表

字体粗细

文字颜色

基本用法

颜色色阶

透明度

文字对齐

行高

字间距

文字装饰

装饰线样式

装饰线颜色

装饰线粗细

文字转换

文字缩进

文字溢出

截断文字

限制行数

文字阴影

空白处理

换行控制

垂直对齐

实战示例

标题样式

引用样式

代码样式

链接样式

标签样式

小结