行高

​基本用法

​相对行高

使用 `leading-none`、`leading-tight`、`leading-snug`、`leading-normal`、`leading-relaxed` 和 `leading-loose` 实用程序，根据元素的当前字体大小为其设置相对行高。

<p class="leading-normal ...">So I started to walk into the water...</p>
<p class="leading-relaxed ...">So I started to walk into the water...</p>
<p class="leading-loose ...">So I started to walk into the water...</p>

​固定行高

使用 `leading-{size}` 实用程序为元素设置固定行高，与当前字体大小无关。当您需要非常精确地控制元素的最终大小时，这些实用程序非常有用。

<p class="leading-6 ...">So I started to walk into the water...</p>
<p class="leading-7 ...">So I started to walk into the water...</p>
<p class="leading-8 ...">So I started to walk into the water...</p>

​条件应用

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 `hover:leading-loose` 仅在悬停时应用 `leading-loose` 实用程序。

<p class="leading-none hover:leading-loose">
  <!-- ... -->
</p>

有关所有可用状态修饰符的完整列表，请查看 悬停、焦点和其他状态 文档。

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、prefers-reduced-motion 等等。例如，使用 `md:leading-loose` 仅在中等屏幕尺寸及以上时应用 `leading-loose` 实用程序。

<p class="leading-none md:leading-loose">
  <!-- ... -->
</p>

要了解更多信息，请查看有关 响应式设计、暗模式 和 其他媒体查询修饰符 的文档。

​覆盖默认行高

重要的是要注意，默认情况下，Tailwind 的 字体大小 实用程序会分别设置自己的默认行高。这意味着，每当您使用响应式字体大小实用程序（如 `sm:text-xl`）时，您为较小断点设置的任何显式行高都将被覆盖。

<!-- The `leading-loose` class will be overridden at the `md` breakpoint -->
<p class="text-lg leading-loose md:text-xl">
  Maybe we can live without libraries...
</p>

如果您想在设置断点特定的字体大小后覆盖默认行高，请确保也设置断点特定的行高。

<!-- The `leading-loose` class will be overridden at the `md` breakpoint -->
<p class="text-lg leading-loose md:text-xl md:leading-loose">
  Maybe we can live without libraries...
</p>

在不同的字体大小中使用相同的行高通常不会为您带来良好的排版效果。行高通常应该随着字体大小的增加而变小，因此这里的默认行为通常可以为您节省大量工作。如果您发现自己在与之作斗争，您可以始终 自定义您的字体大小比例 以不包含默认行高。

​使用自定义值

​自定义您的主题

默认情况下，Tailwind 提供六个相对和八个固定 line-height 实用程序。您可以通过自定义 Tailwind 主题配置的 lineHeight 部分来更改、添加或删除这些实用程序。

module.exports = {
  theme: {
    extend: {
      lineHeight: {
        'extra-loose': '2.5',
        '12': '3rem',
      }
    }
  }
}

了解有关自定义默认主题的更多信息，请参阅 主题自定义 文档。

​任意值

如果您需要使用一次性 line-height 值，该值不适合包含在您的主题中，请使用方括号使用任何任意值动态生成属性。

<p class="leading-[3rem]">
  <!-- ... -->
</p>

了解有关任意值支持的更多信息，请参阅 任意值 文档。