Font size is responsible for how large or small the characters of a text appear on the screen. To customize the font size of an element, Tailwind provides various classes. These classes have a fixed font size and are conventionally named such as “sm” for “small”, “lg” for “large”, and “xl” for “extra large” etc. In order to provide customized font size in Tailwind, the “arbitrary font size” class can be used.
This article will provide the procedure for applying different font sizes on an element in Tailwind using the following outline:
How to Provide Preset Tailwind Font Size Utilities to an Element?
Whenever a Tailwind font size utility is provided to an element, along with the size, a line-height is also assigned to the element.
Syntax
The following syntax is used for providing a font size to an element in Tailwind:
The below table provides detailed information about the equivalent “font-size” and “line-height” properties for the Tailwind font utilities:
| Font Class | Font-size & Line-height Properties |
|---|---|
| text-xs | font-size: 12px
line-height: 16px |
| text-sm | font-size: 14px
line-height: 20px |
| text-base | font-size: 16px
line-height: 24px |
| text-lg | font-size: 18px
line-height: 28px |
| text-xl | font-size: 20px
line-height: 28px |
| text-2xl | font-size: 24px
line-height: 32px |
| text-3xl | font-size: 30px
line-height: 36px |
| text-4xl | font-size: 36px
line-height: 40px |
| text-5xl | font-size: 48px
line-height: 1 |
| text-6xl | font-size: 60px
line-height: 1 |
| text-7xl | font-size: 72px
line-height: 1 |
| text-8xl | font-size: 96px
line-height: 1 |
| text-9xl | font-size: 128px
line-height: 1 |
Let’s understand the Tailwind font utility using a demonstration:
This is a an Extra Small Font Size
</div>
<br>
<div class="text-center text-sm bg-red-100">
This is a Small Font Size
</div>
<br>
<div class="text-center text-base bg-blue-100">
This is a Base Font Size
</div>
<br>
<div class="text-center text-lg bg-red-100">
This is a Large Font Size
</div>
The explanation for the above code is as follows:
- First, four “<div>” elements are created and these are separated from each other using a line break i.e. “<br>” element.
- Next, assign the “text-center” class to all div elements to align the text in the center of the container.
- After that, apply the “text-xs”, “text-sm”, “text-base”, and “text-lg” classes over the div elements respectively to provide the “extra small”, “small”, “base”, and “large” font size to the corresponding div elements.
- To create a visual differentiation, apply the “bg-{color}-{number}” class over div elements to assign different background colors to each div.
The output for the above code is as follows:
How to Provide the Customized/Arbitrary Font Size to an Element in Tailwind?
To provide the customized font size to an element in Tailwind, an “Arbitrary Font Size” utility is used. The following syntax is used to provide an arbitrary font-size value to an Element in Tailwind:
The arbitrary font-size value can be provided in either “px” or “rem”. Let’s see an example of using an arbitrary font size in Tailwind:
In the above code, the first “div” element is given an arbitrary font size of 55 pixels using a “text-[55px]” class, and the second “<div>” element is provided a “3xl” font size using a “text-3xl” class. The output for the above code is as follows:
That is all about customizing the font size of an element in Tailwind.
Conclusion
An element in Tailwind can be provided a font size using the “text-{size}” class. The font size utility also assigns a “line-height” property to the element. For instance, a “text-sm” class in tailwind will assign the element a font size of “14px” and a line height of “20px”. To provide a customized font size to an element in Tailwind, an arbitrary font size can be provided using the “text-[arbitrary value in px or rem]”. This article has provided the procedure for customizing the font size of an element in Tailwind.
