Tailwind CSS Font Size

The Font Size utility class is used to set the font size of an element. It provides a range of predefined font sizes that can be used in your projects.

Syntax

text-{size}

• text- is the prefix used to indicate that it is a font size utility class.
• {size} is the size of the font. This can be a number from 1-9 or a predefined size like xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl.

Example

<p class="text-3xl">This text is 3xl size</p>

Output

The above example will produce the following output:

This text is 3xl size

Explanation

In the above example, the text-3xl utility class is used to set the font size of the paragraph to 3rem. rem is a unit of measurement that is relative to the root font-size of the document.

Use

The Font Size utility class can be used to set the font size of any text element in your HTML. It is especially useful when you want to make sure that the font size is consistent across your project.

Here are a few use cases:

• Set the font size of headings and subheadings
• Set the font size of paragraphs and other text content
• Ensure consistent font sizing across the project

Important Points

• The font size classes are relative to the root font-size of the document.
• The sizes range from xs to 6xl.
• Custom font sizes can be set using the font-size property in your CSS file.

Summary

The Font Size utility class in Tailwind CSS provides a range of predefined font sizes that can be used to set the font size of any text element in your HTML. It is useful for ensuring consistent font sizing across your project.