Tailwind Font Sizes

This article will cover how Tailwind Font Sizes can managed, and it will highlight the range of classes that developers can employ to adjust and manipulate font sizes in their projects.

The “font-size” class in Tailwind CSS allows us to easily set the font size of an HTML element and makes it easy to adjust font size for various screen sizes and devices.

In Tailwind CSS, you can easily set font sizes using a variety of pre-defined utility classes.

Tailwind Font Sizes

It’s an alternative to the CSS font-size property.

Table Of Content-

Tailwind Font size classes

When designing an interface, Tailwind CSS provides default font sizes.

The fontSize theme configuration defines the default font sizes as listed below.

Classes Overview
text-xs This class is used to set the font size to 0.75rem (12px) which is extra small.
text-sm It’s equivalent to CSS font-size 0.875rem (14px).
text-base This is equal to CSS font-size 1rem (16px). This is the default class.
text-lg This class applies the same styles as CSS font-size 1.125rem (18px).
text-xl This class is used to set the font size to 1.25rem (20px) which is extra large.
text-2xl It’s equivalent to CSS font-size 1.5rem (24px).
text-3xl The font size is set to 1.875rem (30px) using this class.
text-4xl In this case, the font size is set to 2.25rem (36px).
text-5xl It’s equivalent to CSS font-size 3rem (48px).
text-6xl Using this class, the font size is set to 3.75rem (60px).
text-7xl This class is used to set the font size to 4.5rem (72px) which is extra large.
text-8xl The font size is set to 6rem (96px) using this class.
text-9xl It’s equivalent to CSS font-size 8rem (128px).
Note: Make sure the component’s size matches the size specified above.

Syntax

<element class="text-size">....</element>

To illustrate the font-size property, let’s take a look at the following example which makes use of some of the classes defined above:

Example: 

<!DOCTYPE html> <html><head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-semibold my-3 text-slate-700">Font Size Class in Tailwind CSS</p> <div class="bg-gray-200 p-2 rounded text-slate-800 w-full"> <p class="text-xs my-1"> MrExamples: Learning through examples </p> <p class="text-base my-1"> MrExamples: Learning through examples </p> <p class="text-xl my-1"> MrExamples: Learning through examples </p> <p class="text-3xl my-1"> MrExamples: Learning through examples </p> <p class="text-5xl my-1"> MrExamples: Learning through examples </p> </div> </body> </html>

In below example, a few Tailwind font size classes are used for demonstration:

Example: 

<!DOCTYPE html> <html><head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-semibold my-3 text-slate-700">Font Size Class in Tailwind CSS</p> <div class="bg-gray-200 p-2 rounded text-slate-800 w-full"> <p class="text-sm my-1"> MrExamples: Learning through examples </p> <p class="text-lg my-1"> MrExamples: Learning through examples </p> <p class="text-2xl my-1"> MrExamples: Learning through examples </p> <p class="text-4xl my-1"> MrExamples: Learning through examples </p> <p class="text-6xl my-1"> MrExamples: Learning through examples </p> </div> </body> </html>

We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *