排版
用于控制元素字间距的实用工具。
类 | 样式 |
---|---|
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-(<自定义属性>) | letter-spacing: var(<自定义属性>); |
tracking-[<值>] | letter-spacing: <值>; |
使用 tracking-tight
和 tracking-wide
等实用工具来设置元素的字间距
敏捷的棕色狐狸跳过懒惰的狗。
敏捷的棕色狐狸跳过懒惰的狗。
敏捷的棕色狐狸跳过懒惰的狗。
<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>
使用 tracking-[<值>]
语法 来设置字间距基于完全自定义的值
<p class="tracking-[.25em] ..."> <!-- ... --></p>
对于 CSS 变量,您还可以使用 tracking-(<自定义属性>)
语法
<p class="tracking-(--my-tracking) ..."> <!-- ... --></p>
这只是 tracking-[var(<自定义属性>)]
的简写形式,会自动为您添加 var()
函数。
为letter-spacing
实用工具 添加 类似 md:
的断点变体,以便仅在中等 屏幕尺寸及以上应用该实用工具
<p class="tracking-tight md:tracking-wide ..."> <!-- ... --></p>
在变体文档中了解有关使用变体的更多信息。
使用 --tracking-*
主题变量来自定义字间距 项目中的实用工具
@theme { --tracking-tightest: -0.075em; }
现在可以在标记中使用 tracking-tightest
实用工具
<p class="tracking-tightest"> <!-- ... --></p>
在 主题文档中了解有关自定义主题的更多信息.