Tailwind CSS - 字型大小

Tailwind CSS 字型大小是一組預定義的類，用於管理和調整網頁上的文字大小。

Tailwind CSS 字型大小類

下面是指定不同字型大小的 Tailwind CSS 類列表。

類	CSS 屬性
text-xs	font-size: 0.75rem; /* 12px / line-height: 1rem; / 16px */
text-sm	font-size: 0.875rem; /* 14px / line-height: 1.25rem; / 20px */
text-base	font-size: 1rem; /* 16px / line-height: 1.5rem; / 24px */
text-lg	font-size: 1.125rem; /* 18px / line-height: 1.75rem; / 28px */
text-xl	font-size: 1.25rem; /* 20px / line-height: 1.75rem; / 28px */
text-2xl	font-size: 1.5rem; /* 24px / line-height: 2rem; / 32px */
text-3xl	font-size: 1.875rem; /* 30px / line-height: 2.25rem; / 36px */
text-4xl	font-size: 2.25rem; /* 36px / line-height: 2.5rem; / 40px */
text-5xl	font-size: 3rem; /* 48px */ line-height: 1;
text-6xl	font-size: 3.75rem; /* 60px */ line-height: 1;
text-7xl	font-size: 4.5rem; /* 72px */ line-height: 1;
text-8xl	font-size: 6rem; /* 96px */ line-height: 1;
text-9xl	font-size: 8rem; /* 128px */ line-height: 1;

Tailwind CSS 字型大小類的功能

text-xs: 將字型大小設定為 12 畫素，行高為 16 畫素。
text-sm: 將字型大小設定為 14 畫素，行高為 20 畫素。
text-base: 將字型大小設定為 16 畫素，行高為 24 畫素。
text-lg: 將字型大小設定為 18 畫素，行高為 28 畫素。
text-xl: 將字型大小設定為 20 畫素，行高為 28 畫素。
text-2xl: 將字型大小設定為 24 畫素，行高為 32 畫素。
text-3xl: 將字型大小設定為 30 畫素，行高為 36 畫素。
text-4xl: 將字型大小設定為 36 畫素，行高為 40 畫素。
text-5xl: 將字型大小設定為 48 畫素，使用預設行高。
text-6xl: 將字型大小設定為 60 畫素，使用預設行高。
text-7xl: 將字型大小設定為 72 畫素，使用預設行高。
text-8xl: 將字型大小設定為 96 畫素，使用預設行高。
text-9xl: 將字型大小設定為 128 畫素，使用預設行高。

Tailwind CSS 字型大小類示例

以下是一些 Tailwind CSS 字型大小類的示例，這些示例展示瞭如何使用預定義類輕鬆調整和管理文字大小。

設定字型大小

此示例顯示了使用Tailwind CSS 實用程式類應用不同字型大小的方法。這裡，“text-xs”將字型大小設定為 12px，“text-sm”設定為 14px，“text-base”設定為 16px，“text-lg”設定為 18px。大小範圍從“text-xl”到“text-9xl”。

示例

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

<body class="p-4">
    <h1 class="text-2xl font-bold">
        Tailwind CSS Font Size
    </h1>  
    <br>
    <p class="text-xs mb-4">
        Hey, I am with font size 12px (text-xs).
    </p>
    <p class="text-sm mb-4">
        Hey, I am with font size 14px (text-sm).
    </p>
    <p class="text-base mb-4">
        Hey, I am with font size 16px (text-base).
    </p> 
    <p class="text-lg mb-4">
        Hey, I am with font size 18px (text-lg).
    </p>
    <p class="text-xl mb-4">
        Hey, I am with font size 20px (text-xl).
    </p>
    <p class="text-2xl">
        Hey, I am with font size 24px (text-2xl).
    </p> 
</body>

</html>

使用Tailwind CSS 實用程式類設定字型大小時，行高會根據類進行相應調整。您可以使用在“行高”比例尺中定義的任何值，或使用任意值來定義行高。使用 tailwind CSS，字型大小可以達到 9xl。

列印頁面