字母间距

​基础用法

​设置字母间距

使用 tracking-* 实用程序来控制元素的字母间距。

<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 开箱即用的字母间距比例，使用负值没有多大意义，但如果您选择自定义字母间距比例以使用数字而不是宽等描述性词语，则负值修饰符会很有用。

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

​条件应用

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:tracking-wide 来仅 在 hover应用 tracking-wide.

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:tracking-wide 来应用 tracking-wide 程序，适用于中等屏幕尺寸及以上。

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

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.

​使用自定义值

​定制你的主题

默认情况下，Tailwind 提供六个 letter-spacing 实用程序。您可以通过编辑 Tailwind 配置的 theme.letterSpacing 部分来更改、添加或删除这些实用程序。

module.exports = {
  theme: {
    letterSpacing: {
      tightest: '-.075em',
      tighter: '-.05em',
      tight: '-.025em',
      normal: '0',
      wide: '.025em',
      wider: '.05em',
      widest: '.1em',
      widest: '.25em',
    }
  }
}

在 theme customization 文档中了解有关自定义默认主题的更多信息。

​任意值

如果您需要使用一次性的 letter-spacing值，而该值没有必要包含在主题中，请使用方括号动态生成属性，使用任意值。

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

进一步了解，请参考 任意值 文档.