Tailwind CSS - 字母间距

Tailwind CSS Letter Spacing 字母间距 是一个预定义类，用于轻松调整网页上文本元素内字符之间的间距。

Tailwind CSS 字母间距类

以下是 Tailwind CSS 字母间距类列表，这些类指定了不同的字母间距样式，用于调整文本中字符之间的间距。

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>