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)