排版
用于控制元素字体大小的工具类。
| Class | Styles |
|---|---|
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>; |
使用 text-sm 和 text-lg 等工具类来设置元素的字体大小：
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>使用像 text-sm/6 和 text-lg/7 这样的工具类可以同时设置元素的字体大小和行高：
于是我开始走向水中。老实说孩子们，我当时害怕极了。但我坚持前进，当我穿过浪花时，一种奇怪的平静笼罩了我。不知道是神的干预还是万物有灵，但我要告诉你杰瑞，那一刻我就是一名海洋生物学家。
于是我开始走向水中。老实说孩子们，我当时害怕极了。但我坚持前进，当我穿过浪花时，一种奇怪的平静笼罩了我。不知道是神的干预还是万物有灵，但我要告诉你杰瑞，那一刻我就是一名海洋生物学家。
于是我开始走向水中。老实说孩子们，我当时害怕极了。但我坚持前进，当我穿过浪花时，一种奇怪的平静笼罩了我。不知道是神的干预还是万物有灵，但我要告诉你杰瑞，那一刻我就是一名海洋生物学家。
<p class="text-sm/6 ...">于是我开始走向水中...</p><p class="text-sm/7 ...">于是我开始走向水中...</p><p class="text-sm/8 ...">于是我开始走向水中...</p>Use the text-[<value>] syntax to set the 字体大小 based on a completely custom value:
<p class="text-[14px] ..."> Lorem ipsum dolor sit amet...</p>For CSS variables, you can also use the text-(length:<custom-property>) syntax:
<p class="text-(length:--my-text-size) ..."> Lorem ipsum dolor sit amet...</p>This is just a shorthand for text-[length:var(<custom-property>)] that adds the var() function for you automatically.
Prefix a font-size utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="text-sm md:text-base ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.
Use the --text-* theme variables to customize the 字体大小 utilities in your project:
@theme { --text-tiny: 0.625rem; }Now the text-tiny utility can be used in your markup:
<div class="text-tiny"> <!-- ... --></div>你也可以为字体大小提供默认的 line-height（行高）、letter-spacing（字间距）和 font-weight（字重）值：
@theme { --text-tiny: 0.625rem; --text-tiny--line-height: 1.5rem; --text-tiny--letter-spacing: 0.125rem; --text-tiny--font-weight: 500; }Learn more about customizing your theme in the theme documentation.