Tailwind CSS - Font Size

Previous
Quiz
Next

Tailwind CSS font size is a collection of predefined classes for managing and adjusting the text sizes on webpages.

Tailwind CSS Font Size Classes

Below is a list of Tailwind CSS classes that specify different font sizes.

Class CSS Properties
text-xs font-size: 0.75rem; /* 12px */
line-height: 1rem; /* 16px */
text-sm font-size: 0.875rem; /* 14px */
line-height: 1.25rem; /* 20px */
text-base font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
text-lg font-size: 1.125rem; /* 18px */
line-height: 1.75rem; /* 28px */
text-xl font-size: 1.25rem; /* 20px */
line-height: 1.75rem; /* 28px */
text-2xl font-size: 1.5rem; /* 24px */
line-height: 2rem; /* 32px */
text-3xl font-size: 1.875rem; /* 30px */
line-height: 2.25rem; /* 36px */
text-4xl font-size: 2.25rem; /* 36px */
line-height: 2.5rem; /* 40px */
text-5xl font-size: 3rem; /* 48px */
line-height: 1;
text-6xl font-size: 3.75rem; /* 60px */
line-height: 1;
text-7xl font-size: 4.5rem; /* 72px */
line-height: 1;
text-8xl font-size: 6rem; /* 96px */
line-height: 1;
text-9xl font-size: 8rem; /* 128px */
line-height: 1;

Functionality of Tailwind CSS Font Size Classes

  • text-xs: Sets the font size to 12 pixels with a line height of 16 pixels.
  • text-sm: Sets the font size to 14 pixels with a line height of 20 pixels.
  • text-base: Sets the font size to 16 pixels with a line height of 24 pixels.
  • text-lg: Sets the font size to 18 pixels with a line height of 28 pixels.
  • text-xl: Sets the font size to 20 pixels with a line height of 28 pixels.
  • text-2xl: Sets the font size to 24 pixels with a line height of 32 pixels.
  • text-3xl: Sets the font size to 30 pixels with a line height of 36 pixels.
  • text-4xl: Sets the font size to 36 pixels with a line height of 40 pixels.
  • text-5xl: Sets the font size to 48 pixels with a default line height.
  • text-6xl: Sets the font size to 60 pixels with a default line height.
  • text-7xl: Sets the font size to 72 pixels with a default line height.
  • text-8xl: Sets the font size to 96 pixels with a default line height.
  • text-9xl: Sets the font size to 128 pixels with a default line height.

Tailwind CSS Font Size Class Examples

Below are some examples of the Tailwind CSS Font Size class, which shows how the text sizes can be easily adjusted and managed using the predefined classes.

Setting Font Size

This example shows the application of different font sizes using Tailwind CSS utility classes. Here, 'text-xs' sets the font size to 12px, 'text-sm' to 14px, 'text-base' to 16px, and 'text-lg' to 18px. The sizes range from 'text-xl' to 'text-9xl'.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold">
        Tailwind CSS Font Size
    </h1>  
    <br>
    <p class="text-xs mb-4">
        Hey, I am with font size 12px (text-xs).
    </p>
    <p class="text-sm mb-4">
        Hey, I am with font size 14px (text-sm).
    </p>
    <p class="text-base mb-4">
        Hey, I am with font size 16px (text-base).
    </p> 
    <p class="text-lg mb-4">
        Hey, I am with font size 18px (text-lg).
    </p>
    <p class="text-xl mb-4">
        Hey, I am with font size 20px (text-xl).
    </p>
    <p class="text-2xl">
        Hey, I am with font size 24px (text-2xl).
    </p> 
</body>

</html>

When setting the font sizes using Tailwind CSS utility classes, the line height is adjusted accordingly, as per the class. You can use any value defined in your 'line-height' scale or use arbitrary values to define the line height. The font size can go up to 9xl using tailwind CSS.

Print Page
Previous
Next