how to use line height in tailwind css

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 relative line-heights

tailwind css relative line-heights


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>
tailwind css custom line heights

tailwind css custom line heights


Tags: