font-size

Utilities for controlling the font size of an element.

Examples

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>

Customizing your theme

Use theme variables to customise the values these utilities generate:

@theme {
  --text-tiny: 0.625rem;
}