Tailwind CSS - 字母间距

现代 Tailwind CSS：排版与字间距

字间距（letter spacing），在排版（typography）中常被称为 tracking（字距调整），是文本块中所有字符之间空间的统一调整。Tailwind 的 tracking-* 工具类提供了一种简单且一致的方式来控制此属性，显著影响设计的可读性和美观度。

字间距（字距调整）工具类

Tailwind 包含一组默认的字距调整工具类，范围从紧密到宽松。

类名	CSS 属性	效果
tracking-tighter	letter-spacing: -0.05em;	减少间距
tracking-tight	letter-spacing: -0.025em;	略微减少间距
tracking-normal	letter-spacing: 0em;	默认，无变化
tracking-wide	letter-spacing: 0.025em;	略微增加间距
tracking-wider	letter-spacing: 0.05em;	增加间距
tracking-widest	letter-spacing: 0.1em;	显著增加间距

实际示例

要跟随这些示例，请确保你已经设置好了一个现代的 Tailwind CSS 项目。有关说明，请参阅其他章节的设置指南。

示例 1：优化标题

调整字间距是优化标题的常用技巧。大型、粗体标题通常在字距调整略微紧密时看起来更好，而大写或小型大写字母标题可以通过更宽的字距调整来增强，以获得更优雅、轻盈的感觉。

<link href="/dist/output.css" rel="stylesheet">

<body class="font-sans p-8 bg-gray-50">
  <!-- 更紧密的字距调整，用于强大、紧凑的标题 -->
  <h1 class="text-4xl font-bold tracking-tighter text-gray-900">
    The Modern Web Stack
  </h1>

  <!-- 更宽的字距调整，用于优雅的大写副标题 -->
  <p class="text-lg uppercase text-indigo-600 font-semibold tracking-widest mt-2">
    A Developer's Guide
  </p>

  <!-- 正常字距调整，用于可读的文本正文 -->
  <p class="mt-4 max-w-prose tracking-normal text-gray-700">
    This guide explores the powerful combination of frameworks and tools that define modern application development. Proper typography, including letter spacing, is key to a professional user experience.
  </p>
</body>

响应式和基于状态的字距调整

与大多数 Tailwind 工具类一样，你可以根据不同的屏幕尺寸或 hover 等状态有条件地应用字距调整类。

<link href="/dist/output.css" rel="stylesheet">

<div class="p-8">
  <a href="#"
    class="
      text-lg font-semibold text-blue-600
      tracking-wide
      hover:tracking-widest
      transition-all duration-300">
    Hover me to see tracking change
  </a>

  <p class="mt-4 text-base tracking-normal md:tracking-wide">
    This text has normal tracking on mobile, but wider tracking on larger screens.
  </p>
</div>

高级：任意值与自定义

使用任意值

如果默认的工具类不够精确，你可以使用 Tailwind 的方括号语法（square bracket notation）即时生成具有任何值的类。这是即时编译（Just-In-Time, JIT）引擎的一个强大功能，该引擎在 Tailwind CSS v3+ 中是标准配置。

<!-- 为非常具体的字距调整值创建一个类 -->
<p class="tracking-[-0.015em]">
  This text has custom, slightly negative tracking.
</p>

<p class="tracking-[.25em]">
  This text has extremely wide tracking.
</p>

自定义你的主题

对于你经常重复使用的值，最好将它们添加到你的 tailwind.config.js 文件中。这有助于保持你的设计系统的一致性。

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      letterSpacing: {
        'extra-loose': '.2em',
        'super-tight': '-0.075em',
      }
    },
  },
  plugins: [],
}

Headline

可访问性与可读性

尽管调整字间距是一个很棒的设计工具，但请注意其对可读性的影响。极端的字间距值——无论是过紧还是过松——都可能使文本难以阅读，特别是对于长段落和视力障碍（visual impairments）用户。将大幅度的字距调整保留给标题或简短的装饰性文本，而对正文则使用更微妙的值。