首先，您必须在 styles 文件夹中的globals.css中添加 * 导入的字体URL，对于React.js，src 文件夹中的index.css*中将添加 * 导入的字体URL。
例如：

@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

然后在tailwind.config.js文件中扩展 modules.exports

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        play: ["Play", "sans-serif"],
      },
    },
  },
  plugins: [],
};

最后，您可以在任何地方使用此字体，例如

<h2 className="font-play text-5xl font-bold uppercase">
  Hello World!
</h2>

React中J
第1步：在index.css中导入Google字体

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

步骤2：在Tailwind CSS中配置Google字体

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      fontFamily: {
          pacifico: ['"Pacifico"', ...defaultTheme.fontFamily.sans],
      }
    }
  },
}

第3步：使用自定义Google字体

<h1 class="pacifico">Pacifico is Google Font</h1>