Tailwind CSS - Line Height

Previous
Quiz
Next

Tailwind CSS Line Height is a collection of predefined classes that enable us to control the spacing between lines of text by setting line height values on a webpage.

Tailwind CSS Line Height Classes

Below is a list of Tailwind CSS Line Height classes that provide options to adjust the spacing between text lines.

Class CSS Properties
leading-3 line-height: .75rem;
/* 12px */
leading-4 line-height: 1rem;
/* 16px */
leading-5 line-height: 1.25rem;
/* 20px */
leading-6 line-height: 1.5rem;
/* 24px */
leading-7 line-height: 1.75rem;
/* 28px */
leading-8 line-height: 2rem;
/* 32px */
leading-9 line-height: 2.25rem;
/* 36px */
leading-10 line-height: 2.5rem;
/* 40px */
leading-none line-height: 1;
leading-tight line-height: 1.25;
leading-snug line-height: 1.375;
leading-normal line-height: 1.5;
leading-relaxed line-height: 1.625;
leading-loose line-height: 2;

Functionality Of Tailwind CSS Line Height Classes

  • leading-3: This class applies a line height of 0.75 rem, equal to 12 pixels for text spacing.
  • leading-4: This class applies a line height of 1 rem, equal to 16 pixels for text spacing.
  • leading-5: This class applies a line height of 1.25 rem, equal to 20 pixels for text spacing.
  • leading-6: This class applies a line height of 1.5 rem, equal to 24 pixels for text spacing.
  • leading-7: This class applies a line height of 1.75 rem, equal to 28 pixels for text spacing.
  • leading-8: This class applies a line height of 2 rem, equal to 32 pixels for text spacing.
  • leading-9: This class applies a line height of 2.25 rem, equal to 36 pixels for text spacing.
  • leading-10: This class applies a line height of 2.5 rem, equal to 40 pixels for text spacing.
  • leading-none: This class applies a line height of 1 rem, removing extra spacing between lines.
  • leading-tight: This class applies a line height of 1.25 rem, making text more closely spaced.
  • leading-snug: This class applies a line height of 1.375 rem, creating slightly closer spacing.
  • leading-normal: This class applies a line height of 1.5 rem, which is the default for text.
  • leading-relaxed: This class applies a line height of 1.625 rem, giving text an open appearance.
  • leading-loose: This class applies a line height of 2 rem, creating extra space between lines of text.

Tailwind CSS Line Height Class Examples

Below are examples of Tailwind CSS line height classes that enable exact vertical spacing adjustment between lines of text on webpages.

Setting Fixed Line Height

This example shows Tailwind CSS manages line height classes, starting with leading-3 to leading-10 to show incremental spacing increments of 4 pixels. It then provides precise control options for text spacing using leading-none and leading-tight.

Example

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

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Line Height
    </h2> 
    <p class="underline"><strong>leading-3:</strong></p>
    <p class="leading-3 mb-4">
        Tea is more than just a beverage; it accompanies me 
        from the morning's first sip to the soothing cup 
        before bed, offering moments of peace.  
    </p>
    <p class="underline"><strong>leading-4:</strong></p>
    <p class="leading-4 mb-4">
        Tea is more than just a beverage; it's with me from 
        the morning's first sip to the soothing cup before 
        bed, offering moments of peace.
    </p>
    <p>
        <strong>Continue increasing up to leading-10 
        for more spacing...</strong>
    </p>
</body>

</html>

Setting Relative Line Height

This example shows how Tailwind CSS can be used to adjust line heights with leading-snug, leading-normal, leading-relaxed, and leading-loose classes. Each paragraph shows a different line height setting with different levels of spacing between lines of text.

Example

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

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Line Height
    </h2> 
    <p class="underline"><strong>leading-snug:</strong></p>
    <p class="leading-snug mb-4">
        Tea is more than just a beverage; it accompanies me 
        from the morning's first sip to the soothing cup 
        before bed, offering moments of peace.  
    </p>
    <p class="underline"><strong>leading-relaxed:</strong></p>
    <p class="leading-relaxed mb-4">
        Tea is more than just a beverage; it's with me from 
        the morning's first sip to the soothing cup before 
        bed, offering moments of peace.
    </p>
    <p class="underline"><strong>leading-normal:</strong></p>
    <p class="leading-normal mb-4">
        Tea is more than just a beverage; it accompanies me 
        from the morning's first sip to the soothing cup 
        before bed, offering moments of peace.
    </p>
    <p class="underline"><strong>leading-loose:</strong></p>
    <p class="leading-loose">
        Tea is more than just a beverage; it accompanies me 
        from the morning's first sip to the soothing cup 
        before bed, offering moments of peace.
    </p>
</body>

</html>
Print Page
Previous
Next