Tailwind CSS - 字間距

Tailwind CSS 的**字間距**是一個預定義的類，用於輕鬆調整網頁上文字元素中字元之間的間距。

Tailwind CSS 字間距類

以下是 Tailwind CSS 字間距類列表，這些類指定不同的字間距樣式以調整文字中字元之間的間距。

類	屬性
tracking-tighter	letter-spacing: -0.05em;
tracking-tight	letter-spacing: -0.025em;
tracking-normal	letter-spacing: 0em;
tracking-wide	letter-spacing: 0.025em;
tracking-wider	letter-spacing: 0.05em;
tracking-widest	letter-spacing: 0.1em;

Tailwind CSS 字間距類的功能

**tracking-tighter:** 此類將字母之間的間距減少 -0.05 em。
**tracking-tight:** 此類將字母之間的間距減少 -0.025 em。
**tracking-normal:** 此類將字間距設定為預設值 (0 em)。
**tracking-wide:** 此類將字母之間的間距增加 0.05 em。
**tracking-wider:** 此類將字母之間的間距增加 0.1 em。
**tracking-widest:** 此類將字母之間的間距增加 0.2 em。

Tailwind CSS 字間距類示例

以下是 Tailwind CSS 字間距類的示例，它們允許您控制文字中字元之間的間距，以實現不同的視覺效果和可讀性增強。

設定字間距

此示例顯示瞭如何應用 Tailwind CSS 字間距類來調整文字中字元之間的間距，從而建立不同的視覺效果。

示例

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

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Letter Spacing
    </h1>  
    <p class="underline">Applying tracking-tighter</p> 
    <p class="tracking-tighter mb-4">
        This is tracking-tighter in Tailwind CSS
    </p>
    <p class="underline">Applying tracking-tight</p> 
    <p class="tracking-tight mb-4">
        This is tracking-tight in Tailwind CSS
    </p>
    <p class="underline">Applying tracking-normal</p> 
    <p class="tracking-normal mb-4">
        This is tracking-normal in Tailwind CSS
    </p>
    <p class="underline">Applying tracking-wide</p> 
    <p class="tracking-wide mb-4">
        This is tracking-wide in Tailwind CSS
    </p>
    <p class="underline">Applying tracking-wider</p> 
    <p class="tracking-wider mb-4">
        This is tracking-wider in Tailwind CSS
    </p>
    <p class="underline">Applying tracking-widest</p> 
    <p class="tracking-widest mb-4">
        This is tracking-widest in Tailwind CSS
    </p>
</body>

</html>

設定負字間距

在以下示例中，我們將應用**負字間距**，您只需在類名前新增一個**負號 (-)**。對於字間距來說，負值沒有任何意義。但是，如果您選擇自定義字間距比例以使用數字而不是像“寬”這樣的描述性詞語，則負值修飾符可能會有用。

示例

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

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Letter Spacing
    </h1>  
    <p class="underline">Applying tracking-2</p> 
    <p class="tracking-2 mb-4">
       This a textual content with tracking-2 Class
    </p>
    <p class="underline">Applying -tracking-2</p> 
    <p class="-tracking-2 mb-4">
       This a textual content with tracking-2 Class
    </p>
</body>

</html>

列印頁面