Tailwind CSS 是一种快速构建网站和应用程序的工具，它使用了一系列命名类来生成样式。然而，有时候我们需要更改默认的行高和字体大小以适应我们的设计需求。在本文中，我们将学习如何使用 Tailwind CSS 更改默认行高和字体大小。
更改默认行高
在 Tailwind CSS 中，可以使用 leading 类来更改行高。默认情况下，行高为 1.5。例如，要将行高更改为 1.75，可以使用以下类：
<p class="leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
在上面的示例中，leading-relaxed 类将行高设置为 1.75。
除了使用预定义的 leading 类之外，还可以使用 leading-none 类将行高设置为 1，或使用 leading-tight 类将行高设置为 1.25。
<p class="leading-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="leading-tight">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
更改默认字体大小
在 Tailwind CSS 中，可以使用 text 类来更改字体大小。默认情况下，字体大小为 1rem。例如，要将字体大小更改为 1.25rem，可以使用以下类：
<p class="text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
在上面的示例中，text-lg 类将字体大小设置为 1.25rem。
除了使用预定义的 text 类之外，还可以使用 text-xs 类将字体大小设置为 0.75rem，或使用 text-xl 类将字体大小设置为 1.5rem。
<p class="text-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="text-xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
自定义行高和字体大小
如果预定义的 leading 和 text 类不能满足您的需求，您可以使用 line-height 和 font-size 类来自定义行高和字体大小。
例如，要将行高设置为 2.5，可以使用以下类：
<p class="line-height-25">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
在上面的示例中，line-height-25 类将行高设置为 2.5。
同样地，要将字体大小设置为 2rem，可以使用以下类：
<p class="font-size-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
在上面的示例中，font-size-2xl 类将字体大小设置为 2rem。
总结
在 Tailwind CSS 中，可以使用预定义的 leading 和 text 类来更改默认行高和字体大小，也可以使用 line-height 和 font-size 类来自定义行高和字体大小。通过这些技巧，您可以轻松地创建适合您设计需求的样式。
示例代码：
<p class="leading-relaxed text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="leading-none text-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="leading-tight text-xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="line-height-25 font-size-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d1dccd2f5e1655d574961