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>

打印页面