Tailwind CSS 是一个流行的 CSS 框架，它提供了一系列的 CSS 类，能够快速构建出漂亮的 UI 组件。但是，有的时候我们需要自定义字体，以满足项目的需求。本文将介绍如何在 Tailwind CSS 中自定义字体。
准备工作
在开始之前，我们需要准备以下工作：
- 安装 Node.js 和 npm
- 创建一个新的 Tailwind CSS 项目
步骤
第 1 步：安装依赖
在项目根目录下，运行以下命令安装 postcss-font-family-system-ui 插件：
npm install postcss-font-family-system-ui --save-dev
该插件能够让我们使用系统字体。
第 2 步：配置 Tailwind
打开 tailwind.config.js 文件，添加以下内容：
-- -------------------- ---- -------
-------------- - -
------ -
----------- -
----- -
------------
-- -----------------
----------------
---------------------
------ ----
---------
---------- ------
--------
----- ------
-------------
-- -------------- --------- --
------ ----- -------
------ -- -------
------ -- --------
----- ----- -------
------------
--
--
--
-------- -
------------------------------------------
-- ---------
-------- --------------
---
--
-以上代码中，我们定义了一个名为 sans 的字体族，它使用了系统字体，并在系统字体不可用时使用默认字体。我们还安装了 postcss-font-family-system-ui 插件，并使用了 font-sans 类名。
第 3 步：使用自定义字体
在 HTML 文件中，使用以下代码引入 Tailwind CSS：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.2.0/dist/tailwind.min.css">
然后，使用以下代码使用自定义字体：
<div class="font-sans">Hello, World!</div>
以上代码中，我们使用了 font-sans 类名，它将应用系统字体。
总结
以上就是在 Tailwind CSS 中自定义字体的全部步骤。通过这篇文章，我们学会了如何在 Tailwind CSS 中使用自定义字体，以满足项目的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658403f1d2f5e1655deccc56