Typography
letter-spacing
用于控制元素的字符间距的功能类。
| 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 等功能类来设置元素的字符间距：
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<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 默认提供的命名字符间距比例来说，使用负值可能没有太大意义，但如果你已经自定义了使用数字的比例，它会很有用：
@theme { --tracking-1: 0em; --tracking-2: 0.025em; --tracking-3: 0.05em; --tracking-4: 0.1em;}要使用负的字符间距值，在类名前加上短横线来将其转换为负值：
<p class="-tracking-2">The quick brown fox ...</p>使用自定义值
Use the tracking-[<value>] syntax to set the letter spacing 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 letter spacing utilities in your project:
@theme { --tracking-tightest: -0.075em; }Now the tracking-tightest utility can be used in your markup:
<p class="tracking-tightest"> <!-- ... --></p>Learn more about customizing your theme in the theme documentation.
