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.

ClassesOverview
text-xsThis class is used to set the font size to 0.75rem (12px) which is extra small.
text-smIt’s equivalent to CSS font-size 0.875rem (14px).
text-baseThis is equal to CSS font-size 1rem (16px). This is the default class.
text-lgThis class applies the same styles as CSS font-size 1.125rem (18px).
text-xlThis class is used to set the font size to 1.25rem (20px) which is extra large.
text-2xlIt’s equivalent to CSS font-size 1.5rem (24px).
text-3xlThe font size is set to 1.875rem (30px) using this class.
text-4xlIn this case, the font size is set to 2.25rem (36px).
text-5xlIt’s equivalent to CSS font-size 3rem (48px).
text-6xlUsing this class, the font size is set to 3.75rem (60px).
text-7xlThis class is used to set the font size to 4.5rem (72px) which is extra large.
text-8xlThe font size is set to 6rem (96px) using this class.
text-9xlIt’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 *