Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Line Height

  • Last Updated : 16 Feb, 2021

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :