letter-spacing

用于控制元素字距（letter spacing）的工具类。

快速参考

类	属性
tracking-tighter	letter-spacing: var(--tracking-tighter); /* -0.05em */
tracking-tight	letter-spacing: var(--tracking-tight); /* -0.025em */
tracking-normal	letter-spacing: var(--tracking-normal); /* 0em */
tracking-wide	letter-spacing: var(--tracking-wide); /* 0.025em */
tracking-wider	letter-spacing: var(--tracking-wider); /* 0.05em */
tracking-widest	letter-spacing: var(--tracking-widest); /* 0.1em */
tracking-(<custom-property>)	letter-spacing: var(<custom-property>);
tracking-[<value>]	letter-spacing: <value>;

示例

基础示例

使用 tracking-tight 和 tracking-wide 等工具类来设置元素的字距：

tracking-tight

The quick brown fox jumps over the lazy dog.

tracking-normal

The quick brown fox jumps over the lazy dog.

tracking-wide

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:tracking-tight,tracking-normal,tracking-wide] -->
<p class="tracking-tight ...">The quick brown fox ...</p>
<p class="tracking-normal ...">The quick brown fox ...</p>
<p class="tracking-wide ...">The quick brown fox ...</p>

使用负值

对 Tailwind 自带的具名字距比例来说，使用负值意义不大；但如果你把比例自定义成了数字，负值就会很有用：

@theme {
  --tracking-1: 0em;
  --tracking-2: 0.025em;
  --tracking-3: 0.05em;
  --tracking-4: 0.1em;
}

要使用负字距，在类名前面加一个短横线，即可将其转换为负值：

<!-- [!code classes:-tracking-2] -->
<p class="-tracking-2">The quick brown fox ...</p>

使用自定义值

使用 tracking-[<value>] 等工具类，可根据完全自定义的值设置字距：

<p class="tracking-[.25em] ...">
 Lorem ipsum dolor sit amet...
</p>

对于 CSS 变量，也可以使用 tracking-(<custom-property>) 语法：

<p class="tracking-(--my-tracking) ...">
 Lorem ipsum dolor sit amet...
</p>

这只是 tracking-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体前缀，即可让 letter-spacing 工具类仅在中等及以上屏幕尺寸下生效：

<p class="tracking-tight md:tracking-wide ...">
 Lorem ipsum dolor sit amet...
</p>

在变体文档中了解更多关于使用变体的信息。

自定义主题

使用 --tracking-* 主题变量来自定义项目中的字距工具类：

@theme {
  --tracking-tightest: -0.075em;
}

现在可以在标记中使用 tracking-tightest 工具类：

<p class="tracking-tightest">
 Lorem ipsum dolor sit amet...
</p>

在主题文档中了解更多关于自定义主题的信息。