tailwindcssでfont-familyの設定をする #tailwindcss

tailwindcssで日本語のフォントを含めたfont-familyの設定をしたいと思い調べたのでメモします。

方法

1. 使用したいfont-familyを記述

tailwind.config.js に以下のような形式で使用したいfont-familyを書きます。

例）

tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
      body: [
        'Avenir',
        'Helvetica Neue',
        'Helvetica',
        'Arial',
        'Hiragino Sans',
        'ヒラギノ角ゴシック',
        'メイリオ',
        'Meiryo',
        'YuGothic',
        'Yu Gothic',
        'ＭＳ Ｐゴシック',
        'MS PGothic',
        'sans-serif'
      ]
    }
  },
  variants: {},
  plugins: []
};

（font-family は Font-familyメーカーより生成）

なおスペースなどを含むフォント名の場合は以下のようにダブルクオーテーションで囲むと良いそうです。
(参考: https://tailwindcss.com/docs/font-family/#app)

body: [
  '"Times New Roman"',
],

2. クラスを適用

上記のように設定すると、font-bodyというクラスが作られるので、それをbody要素に適応します。
例）

index.html


<html>
<!-- ... -->
<body class="font-body">
  <!-- ... -->
</body>
</html>

これでうまくいくはずです。

余談

上の例では、tailwind.config.jsでfontFamily以下にbodyというkeyを用意しましたが、実はkeyの名前はなんでもいいらしいです。例えばkeyをhogeにした場合は、font-hogeというクラスが生成されます。
(参考: https://github.com/tailwindcss/discuss/issues/293)