排版
用于控制元素字母间距的工具类。
| Class | Styles |
|---|---|
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 等工具类设置元素的字母间距：
敏捷的棕色狐狸跃过懒狗。
敏捷的棕色狐狸跃过懒狗。
敏捷的棕色狐狸跃过懒狗。
<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-最紧: -0.075em; }Now the tracking-最紧 utility can be used in your markup:
<p class="tracking-最紧"> Lorem ipsum dolor sit amet...</p>Learn more about customizing your theme in the theme documentation.