tailwindcssを使ってTypographyにアタッチするフォントをクラスベースで変えるやり方について～パッケージ管理できるfontsourceを使って～

こんにちわ。nap5です。


tailwindcssを使ってクラスベースでTypographyにアタッチするフォントを変えるやり方について紹介したいと思います。

公式ドキュメント上だと以下にあたります。

Font Family - Tailwind CSS

今回は3つデモで使ってみました。
Kosugi, Noto Sans JP,Interの3つです。

Fontsource

実際にカスタマイズするとなると、Web標準のミームを意識した命名を踏襲するよりは、案件で共通認識の持てるミームがいいだろうなと考え、デモもそんな感じにしています。

Tailwindcssの設定では以下のようにしています。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    fontFamily: {
      kosugi: ['Kosugi', 'sans-serif'],
      noto: ['Noto Sans JP', 'sans-serif'],
      inter: ['Inter', 'sans-serif'],
    },
    extend: {},
  },
  plugins: [],
};

使用する側では以下のように指定します。

<h2 className="font-kosugi text-3xl">こんにちは kosugi</h2>
<h2 className="font-noto text-3xl">こんにちは noto</h2>
<h2 className="font-inter text-3xl">こんにちは inter</h2>

デモサイトです。

タイトル未設定

デモコードです。

boring-https-s76tsg - CodeSandbox

簡単ですが、以上です。