排版
font-size
用于控制元素字体大小的工具。
| 类 | 样式 |
|---|---|
text-xs | font-size: var(--text-xs); /* 0.75rem (12px) */
line-height: var(--text-xs--line-height); /* calc(1 / 0.75) */ |
text-sm | font-size: var(--text-sm); /* 0.875rem (14px) */
line-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */ |
text-base | font-size: var(--text-base); /* 1rem (16px) */
line-height: var(--text-base--line-height); /* calc(1.5 / 1) */ |
text-lg | font-size: var(--text-lg); /* 1.125rem (18px) */
line-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */ |
text-xl | font-size: var(--text-xl); /* 1.25rem (20px) */
line-height: var(--text-xl--line-height); /* calc(1.75 / 1.25) */ |
text-2xl | font-size: var(--text-2xl); /* 1.5rem (24px) */
line-height: var(--text-2xl--line-height); /* calc(2 / 1.5) */ |
text-3xl | font-size: var(--text-3xl); /* 1.875rem (30px) */
line-height: var(--text-3xl--line-height); /* calc(2.25 / 1.875) */ |
text-4xl | font-size: var(--text-4xl); /* 2.25rem (36px) */
line-height: var(--text-4xl--line-height); /* calc(2.5 / 2.25) */ |
text-5xl | font-size: var(--text-5xl); /* 3rem (48px) */
line-height: var(--text-5xl--line-height); /* 1 */ |
text-6xl | font-size: var(--text-6xl); /* 3.75rem (60px) */
line-height: var(--text-6xl--line-height); /* 1 */ |
text-7xl | font-size: var(--text-7xl); /* 4.5rem (72px) */
line-height: var(--text-7xl--line-height); /* 1 */ |
text-8xl | font-size: var(--text-8xl); /* 6rem (96px) */
line-height: var(--text-8xl--line-height); /* 1 */ |
text-9xl | font-size: var(--text-9xl); /* 8rem (128px) */
line-height: var(--text-9xl--line-height); /* 1 */ |
text-(length:<custom-property>) | font-size: var(<custom-property>); |
text-[<value>] | font-size: <value>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 text-sm 和 text-lg 等工具设置元素的字体大小：
¥Use utilities like text-sm and text-lg to set the font size of an element:
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.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="text-sm ...">The quick brown fox ...</p><p class="text-base ...">The quick brown fox ...</p><p class="text-lg ...">The quick brown fox ...</p><p class="text-xl ...">The quick brown fox ...</p><p class="text-2xl ...">The quick brown fox ...</p>设置行高(Setting the line-height)
¥Setting the line-height
使用 text-sm/6 和 text-lg/7 等工具同时设置元素的字体大小和行高：
¥Use utilities like text-sm/6 and text-lg/7 to set the font size and line-height of an element at the same time:
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-sm/6 ...">So I started to walk into the water...</p><p class="text-sm/7 ...">So I started to walk into the water...</p><p class="text-sm/8 ...">So I started to walk into the water...</p>使用自定义值(Using a custom value)
¥Using a custom value
使用 text-[<value>] 语法 根据完全自定义的值设置 font size：
<p class="text-[14px] ..."> Lorem ipsum dolor sit amet...</p>对于 CSS 变量，还可以使用 text-(length:<custom-property>) 语法：
<p class="text-(length:--my-text-size) ..."> Lorem ipsum dolor sit amet...</p>这只是简写，用于 text-[length:var(<custom-property>)] 它会自动为你添加 var() 函数。
响应式设计(Responsive design)
¥Responsive design
在 font-size 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<p class="text-sm md:text-base ..."> Lorem ipsum dolor sit amet...</p>请参阅 变体文档 详细了解如何使用变体。
自定义主题(Customizing your theme)
¥Customizing your theme
使用 --text-* 主题变量来自定义项目中的 font size 工具：
@theme { --text-tiny: 0.625rem; }现在 text-tiny 工具可用于你的标记：
<div class="text-tiny"> <!-- ... --></div>你还可以为字体大小提供默认的 line-height、letter-spacing 和 font-weight 值：
¥You can also provide default line-height, letter-spacing, and font-weight values for a font size:
@theme { --text-tiny: 0.625rem; --text-tiny--line-height: 1.5rem; --text-tiny--letter-spacing: 0.125rem; --text-tiny--font-weight: 500; }在此详细了解如何自定义主题： 主题文档。