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。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 字间距类示例

以下是 Tailwind CSS 字间距类的示例,它们允许您控制文本中字符之间的间距,以实现不同的视觉效果和可读性增强。

设置字间距

此示例显示了如何应用 Tailwind CSS 字间距类来调整文本中字符之间的间距,从而创建不同的视觉效果。

示例

Open Compiler
<!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>

设置负字间距

在以下示例中,我们将应用**负字间距**,您只需在类名前添加一个**负号 (-)**。对于字间距来说,负值没有任何意义。但是,如果您选择自定义字间距比例以使用数字而不是像“宽”这样的描述性词语,则负值修饰符可能会有用。

示例

Open Compiler
<!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>
广告