字母间距

示例

基本示例

使用诸如 tracking-tight 和 tracking-wide 的工具类来设置元素的字母间距：

<p class="tracking-tight ...">快速的棕色狐狸 ...</p>
<p class="tracking-normal ...">快速的棕色狐狸 ...</p>
<p class="tracking-wide ...">快速的棕色狐狸 ...</p>

使用负值

使用负值在 Tailwind 默认的命名字母间距规模中没有太大意义，但如果您自定义了规模以使用数字，它可能会很有用：

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

要使用负的字母间距值，请在类名前加上短横线将其转换为负值：

<p class="-tracking-2">快速的棕色狐狸 ...</p>

使用自定义值

Use the tracking-[<value>] syntax to set the 字母间距 based on a completely custom value:

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

For CSS variables, you can also use the tracking-(<custom-property>) syntax:

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

This is just a shorthand for tracking-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix a letter-spacing utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

自定义主题

Use the --tracking-* theme variables to customize the 字母间距 utilities in your project:

@theme {
  --tracking-最紧: -0.075em; 
}

Now the tracking-最紧 utility can be used in your markup:

<p class="tracking-最紧">
  <!-- ... -->
</p>

Learn more about customizing your theme in the theme documentation.