排版
控制元素字体大小的工具类。
| 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 等工具类设置元素的字体大小：
敏捷的棕色狐狸跳过懒狗。
敏捷的棕色狐狸跳过懒狗。
敏捷的棕色狐狸跳过懒狗。
敏捷的棕色狐狸跳过懒狗。
敏捷的棕色狐狸跳过懒狗。
<!-- [!代码类:text-sm,text-base,text-lg,text-xl,text-2xl] --><p class="text-sm ...">敏捷的棕色狐狸 ...</p><p class="text-base ...">敏捷的棕色狐狸 ...</p><p class="text-lg ...">敏捷的棕色狐狸 ...</p><p class="text-xl ...">敏捷的棕色狐狸 ...</p><p class="text-2xl ...">敏捷的棕色狐狸 ...</p>使用 text-sm/6 和 text-lg/7 等工具类同时设置元素的字体大小和行高：
所以我开始走进水中。老兄们，我不会撒谎，我感到非常害怕。但我继续前进，当我过去 遇到浪潮时，一种奇怪的平静感涌上心头。我不知道那是神的干预还是所有生物的亲密关系，但我告诉你，杰瑞，在那一刻，我 是 一个海洋生物学家。
所以我开始走进水中。老兄们，我不会撒谎，我感到非常害怕。但我继续前进，当我过去 遇到浪潮时，一种奇怪的平静感涌上心头。我不知道那是神的干预还是所有生物的亲密关系，但我告诉你，杰瑞，在那一刻，我 是 一个海洋生物学家。
所以我开始走进水中。老兄们，我不会撒谎，我感到非常害怕。但我继续前进，当我过去 遇到浪潮时，一种奇怪的平静感涌上心头。我不知道那是神的干预还是所有生物的亲密关系，但我告诉你，杰瑞，在那一刻，我 是 一个海洋生物学家。
<!-- [!代码类:text-sm/6,text-sm/7,text-sm/8] --><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.