font size

Utilities for controlling the font size of an element.

2025-03-13

Written by: tdtc

ClassStyles
text-xsfont-size: var(—text-xs); /* 0.75rem (12px) /
line-height: var(—text-xs—line-height); / calc(1 / 0.75) */
text-smfont-size: var(—text-sm); /* 0.875rem (14px) /
line-height: var(—text-sm—line-height); / calc(1.25 / 0.875) */
text-basefont-size: var(—text-base); /* 1rem (16px) /
line-height: var(—text-base—line-height); / calc(1.5 / 1) */
text-lgfont-size: var(—text-lg); /* 1.125rem (18px) /
line-height: var(—text-lg—line-height); / calc(1.75 / 1.125) */
text-xlfont-size: var(—text-xl); /* 1.25rem (20px) /
line-height: var(—text-xl—line-height); / calc(1.75 / 1.25) */
text-2xlfont-size: var(—text-2xl); /* 1.5rem (24px) /
line-height: var(—text-2xl—line-height); / calc(2 / 1.5) */
text-3xlfont-size: var(—text-3xl); /* 1.875rem (30px) /
line-height: var(—text-3xl—line-height); / calc(2.25 / 1.875) */
text-4xlfont-size: var(—text-4xl); /* 2.25rem (36px) /
line-height: var(—text-4xl—line-height); / calc(2.5 / 2.25) */
text-5xlfont-size: var(—text-5xl); /* 3rem (48px) /
line-height: var(—text-5xl—line-height); / 1 */
text-6xlfont-size: var(—text-6xl); /* 3.75rem (60px) /
line-height: var(—text-6xl—line-height); / 1 */
text-7xlfont-size: var(—text-7xl); /* 4.5rem (72px) /
line-height: var(—text-7xl—line-height); / 1 */
text-8xlfont-size: var(—text-8xl); /* 6rem (96px) /
line-height: var(—text-8xl—line-height); / 1 */
text-9xlfont-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>;

Basic example

Use utilities like text-sm and text-lg to set the font size of an element:

<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:

<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-[] syntax to set the font size based on a completely custom value:

<p class="text-[14px] ...">
  <!-- ... -->
</p>

Ref