こんにちわ。nap5です。


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

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

実際にカスタマイズするとなると、 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>

デモサイトです。