我用谷歌搜索并找到了一些解决方案。

但是,在这里我分享一个更简单的。

• 这对项目中的一次性字体很有用。**

• 无需创建_document.js或编辑tailwind.config.js。

解决方案

1. 转到Google Fonts并选择一种字体

[](https://res.cloudinary.com/practicaldev/image/fetch/s--vvbQj6ZS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https: //res.cloudinary.com/practicaldev/image/fetch/s--76-dZUNB--/c_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads /articles/hl8jko1te5lm87yar2bl.png)

2. 选择@import并复制代码

[](https://res.cloudinary.com/practicaldev/image/fetch/s--xFJvUloG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// res.cloudinary.com/practicaldev/image/fetch/s--68flBBsR--/c_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m38ctc4fqafcizaxftb7 .png)

3. 粘贴到styles/globals.css

@import url('https://fonts.googleapis.com/css2?familyu003dCaveat&familyu003dOswald:wght@200&displayu003dswap');
@尾风基地;
@tailwind 组件;
@tailwind 实用程序;

4. 随处使用

输入font-[<Your Font Name>]进行申请。

<h1 className="font-bold text-4xl font-['Oswald']">This Is Title</h1>

进入全屏模式 退出全屏模式

提示

如果您使用名称中包含空格的字体,请使用-连接它们

例如font-['Cormorant-SC']为Cormorant SC

我的环境

• “下一个”:“12.2.3”

• “反应”:“18.2.0”

• "tailwindcss": "^3.1.6"