Text
Font Size
text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
To make your font larger or smaller, use the text- utility classes with a size, ranging from xs (very small text) to 9xl (very, very large). For example, the text-xl utility class results in a nice size for subheadings.
text-{size}Apply a 3xl font size to this element.
<div> <p class="">Hello, world!</p></div>Live Preview
Hello, world!
Font Weight
To make your font bold, you can use font-bold. Actually, there are many font weights defined. For example, font-light reduces the font weight, while font-black is even heavier than font-bold.
font-{weight}Make the text bold.
<div> <p class="">Hello, world!</p></div>Live Preview
Hello, world!
Italic
You can use the italic and not-italic utility classes to make your text italic or not.
Make the text italic.
<div> <p class="">Hello, world!</p></div>Live Preview
Hello, world!
Decorate
You can decorate your text with the underline, overline,line-through, and no-underline utility classes.
Underline the text.
<div> <p class="">Hello, world!</p></div>Live Preview
Hello, world!