Lzh on GitHub

letter-spacing

用于控制元素字距（即字间距）的工具。

快速参考

类别样式
tracking-tighterletter-spacing: var(--tracking-tighter); /* -0.05em */
tracking-tightletter-spacing: var(--tracking-tight); /* -0.025em */
tracking-normalletter-spacing: var(--tracking-normal); /* 0em */
tracking-wideletter-spacing: var(--tracking-wide); /* 0.025em */
tracking-widerletter-spacing: var(--tracking-wider); /* 0.05em */
tracking-widestletter-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. 

<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;
}

要使用负字间距值，请在类名前加上一个破折号以将其转换为负值：

<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: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：

<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>

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