Tailwind CSS 是一个流行的前端框架，它具有简单易用的 CSS 类，可以帮助开发者快速构建出漂亮的用户界面。在 Tailwind CSS 中，设置字体大小和行高是非常常见的操作，因此本文将介绍如何在 Tailwind CSS 中设置字体大小和行高。
设置字体大小
在 Tailwind CSS 中，设置字体大小非常简单。可以使用 text-{size} 类来设置字体大小，其中 {size} 表示字体大小，可以是以下任意一个值：
xs：极小号字体sm：小号字体base：基准字体lg：大号字体xl：极大号字体2xl：超大号字体3xl：巨大号字体4xl：超巨大号字体5xl：特大号字体6xl：超特大号字体
以下是一些示例代码：
<p class="text-xs">这是极小号字体</p> <p class="text-base">这是基准字体</p> <p class="text-4xl">这是超巨大号字体</p>
需要注意的是，Tailwind CSS 中的字体大小是相对于基准字体大小而言的。默认情况下，基准字体大小为 16px，可以使用 text-sm 类来将基准字体大小设为 14px，使用 text-lg 类来将基准字体大小设为 18px。
设置行高
在 Tailwind CSS 中，设置行高也非常简单。可以使用 leading-{size} 类来设置行高，其中 {size} 表示行高，可以是以下任意一个值：
none：无行高tight：紧凑行高snug：舒适行高normal：正常行高relaxed：宽松行高loose：松散行高
以下是一些示例代码：
<p class="leading-none">这是无行高的段落</p> <p class="leading-tight">这是紧凑行高的段落</p> <p class="leading-relaxed">这是宽松行高的段落</p>
需要注意的是，Tailwind CSS 中的行高是相对于基准行高而言的。默认情况下，基准行高是 1.5，可以使用 leading-3 类来将基准行高设为 1，使用 leading-6 类来将基准行高设为 2。
总结
在 Tailwind CSS 中，设置字体大小和行高非常简单，只需要使用对应的 CSS 类即可。需要注意的是，Tailwind CSS 中的字体大小和行高都是相对于基准大小而言的，可以通过修改基准大小来改变所有元素的大小和行高。希望本文能够帮助大家更好地使用 Tailwind CSS。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65618a1fd2f5e1655db95e4b