Tailwind CSSでフォントを設定する方法についてご紹介します。

デフォルトのフォントを使用する

Tailwind CSSでは、すでにいくつかのフォントが組み込まれています。例えば、font-sans（サンセリフ体）、font-serif（セリフ体）、font-mono（モノスペース体）などが利用可能です。以下のようにクラス名に、「font-フォント名」を入れるだけで簡単に使用することができます。

<p class="font-sans">サンセリフ</p>
<p class="font-serif">セリフ</p>
<p class="font-mono">モノスペース</p>

サンセリフ

セリフ

モノスペース

カスタムフォントを使用する

Google FontsなどのカスタムフォントをTailwind CSSで使用するためには、@importを使い、CSSファイルでフォントを読み込みます。

//style.css
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

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

その後、上記で読み込んだフォントを、Tailwind CSSの設定ファイルtailwind.config.jsに記述します。extendオプションを使って、カスタムフォントを設定します。フォントのクラスに使う名前は、好きな名前をつけることが可能です。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        roboto: ['Roboto', 'sans-serif'],
      },
    },
  },
}

設定したカスタムフォント（roboto）をHTML内で使います。font-フォント名で使うことができます。

<p class="font-roboto">これはRobotoフォントです。</p>

終わりに

以上、Tailwind CSSでフォントを設定する方法をご紹介しました。とても簡単なので、ぜひ試してみてください。