1. 排版
  2. 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-(<自定义属性>)
letter-spacing: var(<自定义属性>);
tracking-[<值>]
letter-spacing: <值>;

示例

基本示例

使用 tracking-tighttracking-wide 等实用工具来设置元素的字间距

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

要使用负字间距值,请在类名前面加上破折号将其转换为负值

<p class="-tracking-2">The quick brown fox ...</p>

使用自定义值

使用 tracking-[<值>] 语法 来设置字间距基于完全自定义的值

<p class="tracking-[.25em] ...">  <!-- ... --></p>

对于 CSS 变量,您还可以使用 tracking-(<自定义属性>) 语法

<p class="tracking-(--my-tracking) ...">  <!-- ... --></p>

这只是 tracking-[var(<自定义属性>)] 的简写形式,会自动为您添加 var() 函数。

响应式设计

letter-spacing 实用工具 添加 类似 md: 的断点变体,以便仅在中等 屏幕尺寸及以上应用该实用工具

<p class="tracking-tight md:tracking-wide ...">  <!-- ... --></p>

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

自定义主题

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

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

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

<p class="tracking-tightest">  <!-- ... --></p>

主题文档中了解有关自定义主题的更多信息.

Copyright © 2025 Tailwind Labs Inc.·商标政策