html

How to Customize the Font Size of an Element in Tailwind

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:

text-{size}

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:

<div class="text-center text-xs bg-blue-100">
  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:

text-[arbitrary value]

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:

<div class="text-center text-[55px] bg-blue-100">
  This is an arbitrary Font Size of 55 pixels
</div>
<br>
<div class="text-center text-3xl bg-red-100">
  This is a 3 times Extra Large Font Size
</div>

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.

About the author

Shaheer Ahmad

I am a Technical Author and Software Engineer with a passion for translating complex concepts into accessible insights. I like to be deeply engaged in the world of technology and craft clear and engaging documentation that provides complex software solutions.