letter-spacing

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use utilities like tracking-tight and tracking-wide to set the letter spacing of an element:

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

使用负值(Using negative values)

¥Using negative values

对于 Tailwind 开箱即用的命名字母间距比例，使用负值没有多大意义，但如果你已自定义比例以使用数字，它会很有用：

¥Using negative values doesn't make a ton of sense with the named letter spacing scale Tailwind includes out of the box, but if you've customized your scale to use numbers it can be useful:

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

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

¥To use a negative letter spacing value, prefix the class name with a dash to convert it to a negative value:

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

使用自定义值(Using a custom value)

¥Using a custom value

使用 tracking-[<value>] 语法 根据完全自定义的值设置 letter spacing：

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

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

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

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

响应式设计(Responsive design)

¥Responsive design

在 letter-spacing 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

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

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

现在 tracking-tightest 工具可用于你的标记：

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

在此详细了解如何自定义主题： 主题文档。