在前端开发中，line-height 是一个重要的 CSS 属性，它决定了文本行与行之间的距离。Tailwind 是一个流行的 CSS 框架，提供了许多方便的工具类来快速构建界面。本文将介绍如何在 Tailwind 中设置 line-height，以及一些注意事项和技巧。
设置 line-height 的基本方法
在 Tailwind 中设置 line-height 可以使用 leading 工具类。例如，以下代码将设置一个行高为 1.5 的段落：
<p class="leading-1.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
leading 工具类接受一个数字作为参数，表示行高与字体大小的比例关系。例如，leading-1.5 表示行高为字体大小的 1.5 倍。可以使用小数来设置更精细的行高，例如 leading-1.75。
除了 leading 工具类，Tailwind 还提供了一些其他的工具类来设置 line-height，例如 leading-none 表示行高为 1，leading-tight 表示行高为字体大小的 1.25 倍，leading-loose 表示行高为字体大小的 1.75 倍等等。
注意事项和技巧
在使用 leading 工具类时，有一些注意事项和技巧可以帮助我们更好地控制 line-height。
1. 使用相对单位
在 Tailwind 中，通常使用相对单位（例如 rem 或 em）来设置字体大小。同样，我们也应该使用相对单位来设置 line-height。这样可以确保我们的文本在不同尺寸的屏幕上保持一致的行高。
例如，以下代码将设置一个行高为字体大小的 1.5 倍：
<p class="leading-1.5 text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
这里使用了 text-lg 工具类来设置字体大小为相对单位 rem。
2. 了解基线对齐
在设置 line-height 时，我们需要了解基线对齐的概念。基线是每行文本底部的一条虚拟线，用于对齐不同行的文本。在 Tailwind 中，我们可以使用 align-baseline 和 align-top 工具类来控制基线对齐方式。
例如，以下代码将设置一个行高为字体大小的 1.5 倍，并将基线对齐方式设置为顶部对齐：
<p class="leading-1.5 align-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
3. 使用自定义类
在 Tailwind 中，我们可以使用 @layer 指令来定义自定义的工具类。例如，以下代码将定义一个自定义的 leading-looser 工具类，表示行高为字体大小的 2 倍：
@layer utilities {
.leading-looser {
line-height: 2;
}
}然后我们就可以在 HTML 中使用这个自定义类了：
<p class="leading-looser">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
结论
在 Tailwind 中设置 line-height 非常简单，只需要使用 leading 工具类即可。然而，我们需要注意使用相对单位、了解基线对齐和使用自定义类等技巧，才能更好地控制 line-height，使文本在不同屏幕上都能保持一致的行高。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675baec1a4d13391d8f6ab83