Typography
font-size
Utilities for controlling the font size of an element.
| 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>; |
Examples
Basic example
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
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
Use the text-[<value>] syntax to set the font size based on a completely custom value:
<p class="text-[14px] ..."> <!-- ... --></p>For CSS variables, you can also use the text-(length:<custom-property>) syntax:
<p class="text-(length:--my-text-size) ..."> <!-- ... --></p>This is just a shorthand for text-[length:var(<custom-property>)] that adds the var() function for you automatically.
Responsive design
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 ..."> <!-- ... --></p>Learn more about using variants in the variants documentation.
Customizing your theme
Use the --text-* theme variables to customize the font size 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>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; }Learn more about customizing your theme in the theme documentation.
Tailwind CSS 中文网（本网站）的目标是为中文开发者提供准确、及时的 Tailwind CSS 中文文档
Tailwind CSS 中文文档由本网站维护人员共同翻译，采用 MIT 开源协议发布
本网站与 tailwindcss.com 及 Tailwind Labs Inc. 并无从属关系
Tailwind 商标由 Tailwind Labs Inc. 所有
京ICP备15031610号-8