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