Open In App

Tailwind CSS Line Height

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts lots of value in tailwind CSS  in which all the properties are covered as in class form. It is the alternative to the CSS Line Height property. This class is used to set the amount of space used for lines, such as in the text. Negative values are not allowed.

Line Height classes:

  • leading-3: This class set the line-height at .75rem.
  • leading-4: This class set the line-height at 1rem.
  • leading-5: This class set the line-height at 1.25rem. 
  • leading-6: This class set the line-height at 1.5rem.
  • leading-7: This class set the line-height at 1.75rem.
  • leading-8: This class set the line-height at 2rem.
  • leading-9: This class set the line-height at 2.25rem.
  • leading-10: This class set the line-height at 2.5rem.
  • leading-none: This class set the line-height at 1.
  • leading-tight: This class set the line-height at 1.25.
  • leading-snug: This class set the line-height at 1.375.
  • leading-normal: This class set the line-height at 1.5.
  • leading-relaxed: This class set the line-height at 1.625.
  • leading-loose: This class set the line-height at 2.

Syntax:

<element class="leading-{height}">...</element>

Example: In this example, we will use three classes leading-none, leading-normal and leading-loose. You can change the class name according to your need.

HTML




<!DOCTYPE html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body class="text-center mx-4 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
  
    <b>Tailwind CSS Line Height Class</b>
      
    <div class="mx-24 bg-green-200 text-justify">
        <p class="p-2">leading-none:<br>
            <span class="leading-none">
                How many times were you frustrated 
                while looking out for a good 
                collection of programming/algorithm
                /interview questions? What did you 
                expect and what did you get?
                GeeksforGeeks.
            </span>
        </p>
  
        <p class="p-2">leading-normal:<br>
            <span class="leading-normal">
                How many times were you frustrated 
                while looking out for a good 
                collection of programming/algorithm
                /interview questions? What did you 
                expect and what did you get?
                GeeksforGeeks.
            </span>
        </p>
  
        <p class="p-2">leading-loose:<br>
            <span class="leading-loose">
                How many times were you frustrated 
                while looking out for a good 
                collection of programming/algorithm
                /interview questions? What did you 
                expect and what did you get?
                GeeksforGeeks.
            </span>
        </p>
    </div>
</body>
  
</html>


Output:

Line height classes



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads