tailwindcssでGoogleFontsを使用

はじめに

tailwindcssでGoogleFontsをNext.jsで使用するにあたり
クラス＋プロパティで書きたいのでtailwind.config.tsファイルに追記するも反映されなくて困った話

問題

今回はcourgetteの文字を追加したかったので
tailwind.config.tsにfontfamilyを追加

tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        'courgette': ['Courgette', 'cursive'],
      },
    },
  },
  variants: {},
  plugins: [],
};
export default config;

このままでは反映されず

解決

global.cssファイルに
@import url('https://fonts.googleapis.com/css2family=Courgette&display=swap');の1文を追加

global.css

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

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

<div className="font-courgette">

反映させることが出来ました！

参考記事

この方の記事でimportの1文を追加するところにたどり着きました
https://zenn.dev/natonao/articles/280324541b86ba