字母间距

示例

基础示例

使用 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] ...">  Lorem ipsum dolor sit amet...</p>

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

<p class="tracking-(--my-tracking) ...">  Lorem ipsum dolor sit amet...</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 ...">  Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

自定义主题

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

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

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

<p class="tracking-tightest">  Lorem ipsum dolor sit amet...</p>

Learn more about customizing your theme in the theme documentation.