在 Tailwind CSS 中，字间距被提炼成了 “跟踪（Tracking）” 属性。通过简单的 “tracking-*” 类名，我们可以轻松改变字间距的大小。
Tailwind CSS 字间距语法
在 Tailwind CSS 中，我们可以使用 “tracking-*” 相关类名来定义字间距（相当于传统 CSS 中的 letter-spacing）。
语法：
tracking-{大小}说明：
其中，字间距相关的类名如下表所示。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| tracking-tighter | -0.05em | 极紧凑 |
| tracking-tight | -0.025em | 较紧凑 |
| tracking-normal（默认） | 0em | 默认间距 |
| tracking-wide | 0.025em | 较宽 |
| tracking-wider | 0.05em | 更宽 |
| tracking-widest | 0.1em | 极宽 |
对于字间距的使用，有一个黄金法则：字号越大，间距应该适当缩紧；字号越小，间距应该适当放宽。
Tailwind CSS 字间距示例
接下来，我们通过一个简单的例子来讲解一下如何使用 Tailwind CSS 来定义文本的字间距。
示例 1：定义字间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<h1 class="text-3xl font-black text-gray-900 tracking-tighter">
绿叶网 - 为好教程，全力以赴
</h1>
<p class="text-sm font-medium text-green-600 uppercase tracking-widest mt-4">
LeafCoding - CODE TO GROW, LEAF BY LEAF
</p>
</body>
</html>页面效果如下图所示。
分析：
对于大标题（h1）来说，这里我们使用了 tracking-tighter。当字体非常大时，默认间距会显得松散，稍微缩紧可以让文字看起来更像一个整体，更具冲击力。
对于段落（p）来说，这里我们配合使用 uppercase（全大写）和 tracking-widest。宽阔的字间距能让小字号的英文产生一种 “奢侈品” 般的精致感。
