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>

列印頁面