In this tutorial we will see how to use line height in tailwind css. Also we will see responsive line height, custom line height example with Tailwind CSS.
Examples
tailwind css relative line-heights using leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, and leading-loose.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Line Height Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen space-y-4">
<p class="max-w-xl leading-none">So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't
know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment,
I was a marine biologist.</p>
<p class="max-w-xl leading-tight">So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't
know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment,
I was a marine biologist.</p>
<p class="max-w-xl leading-snug">So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't
know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment,
I was a marine biologist.</p>
<p class="max-w-xl leading-normal">So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't
know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment,
I was a marine biologist.</p>
<p class="max-w-xl leading-relaxed">So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't
know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment,
I was a marine biologist.</p>
<p class="max-w-xl leading-loose">So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't
know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment,
I was a marine biologist.</p>
</div>
</body>
</html>
tailwind css Fixed line heights with leading-{size} leading-3, leading-4, leading-5, leading-6, leading-7, leading-8, leading-9, leading-10.
<p class="leading-3">So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't
know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment,
I was a marine biologist.</p>
tailwind css hover line heights.
<p class="max-w-xl leading-none hover:leading-loose">So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't
know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment,
I was a marine biologist.</p>
tailwind css responsive line heights.
<p class="leading-none lg:leading-loose">So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't
know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment,
I was a marine biologist.</p>
tailwind css custom line heights text with rem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Line Height Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen space-y-4">
<p class="max-w-xl leading-[3rem]">So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't
know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment,
I was a marine biologist.</p>
</div>
</body>
</html>