前言
Tailwind CSS 是一款实用的 CSS 框架，可以让前端开发人员更快速、便捷地构建自己的页面。本文主要介绍如何使用 Tailwind CSS 实现特定的字体权重，以达到不同页面展示效果。
Tailwind CSS 中的字体权重
在 Tailwind CSS 中，通过添加相应的类名，可以快速为文本设置特定的字体权重。比如，可以使用 font-extralight、font-light、font-normal、font-medium、font-semibold、font-bold、font-extrabold 等类名来设置文本的字体权重。
举例来说，在 HTML 中添加如下代码：
<h1 class="font-extrabold">这是一段加粗的标题</h1> <p class="font-light">这是一段比较轻的文本</p>
将在浏览器中得到以下效果：
配置自定义的字体权重
在实际应用中，很可能需要使用一些自定义的字体权重，例如在设计稿中可能需要使用 font-heavy 或者 font-black 等更加粗的字体。此时，可以通过修改 Tailwind CSS 中的配置文件 tailwind.config.js 实现自定义字体的设置。
具体来说，在 tailwind.config.js 文件中，可以添加如下的配置：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
----------- -
-------- ------
-------- -------
--
--
--
--------- ---
-------- ---
-以上代码中，我们添加了 fontWeight 的配置，使用了两个自定义的权重等级，heavy 和 black，并将它们分别设置为 900 和 1000。可以根据实际需要设置不同的权重值。
在 HTML 文件中，通过添加新的类名，在样式中引用自定义类名即可：
<h1 class="font-heavy">这是一段自定义粗体标题</h1> <p class="font-black">这是一段自定义超级粗体文本</p>
得到的效果如下：
若要使用自定义的字体权重，务必要在 Tailwind 的配置文件 tailwind.config.js 中进行相应的配置。
总结
总体来说，Tailwind CSS 是一个非常实用的 CSS 框架，可以在前端开发过程中节省不少代码编写时间。在实现特定的字体权重时，可以通过添加相应的类名实现，同时也可以进行自定义配置，以满足实际需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec2e5cf6b2d6eab36739d4