Tailwind CSS - 行高

Tailwind CSS **行高** 是一个预定义类集合，使我们能够通过在网页上设置行高值来控制文本行的间距。

Tailwind CSS 行高类

下面是 Tailwind CSS 行高类列表，提供调整文本行间距的选项。

类	CSS 属性
leading-3	line-height: .75rem; /* 12px */
leading-4	line-height: 1rem; /* 16px */
leading-5	line-height: 1.25rem; /* 20px */
leading-6	line-height: 1.5rem; /* 24px */
leading-7	line-height: 1.75rem; /* 28px */
leading-8	line-height: 2rem; /* 32px */
leading-9	line-height: 2.25rem; /* 36px */
leading-10	line-height: 2.5rem; /* 40px */
leading-none	line-height: 1;
leading-tight	line-height: 1.25;
leading-snug	line-height: 1.375;
leading-normal	line-height: 1.5;
leading-relaxed	line-height: 1.625;
leading-loose	line-height: 2;

Tailwind CSS 行高类的功能

leading-3: 此类应用 0.75 rem 的行高，相当于文本间距为 12 像素。
leading-4: 此类应用 1 rem 的行高，相当于文本间距为 16 像素。
leading-5: 此类应用 1.25 rem 的行高，相当于文本间距为 20 像素。
leading-6: 此类应用 1.5 rem 的行高，相当于文本间距为 24 像素。
leading-7: 此类应用 1.75 rem 的行高，相当于文本间距为 28 像素。
leading-8: 此类应用 2 rem 的行高，相当于文本间距为 32 像素。
leading-9: 此类应用 2.25 rem 的行高，相当于文本间距为 36 像素。
leading-10: 此类应用 2.5 rem 的行高，相当于文本间距为 40 像素。
leading-none: 此类应用 1 rem 的行高，去除行之间的额外间距。
leading-tight: 此类应用 1.25 rem 的行高，使文本间距更紧密。
leading-snug: 此类应用 1.375 rem 的行高，创建稍微更紧密的间距。
leading-normal: 此类应用 1.5 rem 的行高，这是文本的默认值。
leading-relaxed: 此类应用 1.625 rem 的行高，使文本看起来更宽松。
leading-loose: 此类应用 2 rem 的行高，在文本行之间创建额外的空间。

Tailwind CSS 行高类示例

以下是 Tailwind CSS 行高类的示例，这些类可以精确调整网页上文本行之间的垂直间距。

设置固定行高

此示例显示了 Tailwind CSS 如何管理行高类，从 leading-3 到 leading-10，以显示 4 像素的增量间距。然后，它使用 leading-none 和 leading-tight 提供了对文本间距的精确控制选项。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Line Height
    </h2> 
    <p class="underline"><strong>leading-3:</strong></p>
    <p class="leading-3 mb-4">
        Tea is more than just a beverage; it accompanies me 
        from the morning's first sip to the soothing cup 
        before bed, offering moments of peace.  
    </p>
    <p class="underline"><strong>leading-4:</strong></p>
    <p class="leading-4 mb-4">
        Tea is more than just a beverage; it's with me from 
        the morning's first sip to the soothing cup before 
        bed, offering moments of peace.
    </p>
    <p>
        <strong>Continue increasing up to leading-10 
        for more spacing...</strong>
    </p>
</body>

</html>

设置相对行高

此示例显示了如何使用 Tailwind CSS 通过 leading-snug、leading-normal、leading-relaxed 和 leading-loose 类来调整行高。每个段落显示不同的行高设置，以及文本行之间不同级别的间距。

示例

 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Line Height
    </h2> 
    <p class="underline"><strong>leading-snug:</strong></p>
    <p class="leading-snug mb-4">
        Tea is more than just a beverage; it accompanies me 
        from the morning's first sip to the soothing cup 
        before bed, offering moments of peace.  
    </p>
    <p class="underline"><strong>leading-relaxed:</strong></p>
    <p class="leading-relaxed mb-4">
        Tea is more than just a beverage; it's with me from 
        the morning's first sip to the soothing cup before 
        bed, offering moments of peace.
    </p>
    <p class="underline"><strong>leading-normal:</strong></p>
    <p class="leading-normal mb-4">
        Tea is more than just a beverage; it accompanies me 
        from the morning's first sip to the soothing cup 
        before bed, offering moments of peace.
    </p>
    <p class="underline"><strong>leading-loose:</strong></p>
    <p class="leading-loose">
        Tea is more than just a beverage; it accompanies me 
        from the morning's first sip to the soothing cup 
        before bed, offering moments of peace.
    </p>
</body>

</html>

打印页面