字间距

字间距

用于控制元素字间距的实用工具。

类名样式

类名	样式
`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-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.

<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() 函数。

响应式设计

前缀一个 letter-spacing 实用工具使用断点变体（例如 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>

在主题文档.

本页内容