【Tailwind和訳】TYPOGRAPHY/Font Size

この記事について

この記事は、TYPOGRAPHY/Font Sizeの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

---

Font Size

要素のフォントサイズを制御するためのユーティリティ。

クラスとプロパティの対応表

クラス	プロパティ
text-xs	font-size: 0.75rem; line-height: 1rem;
text-sm	font-size: 0.875rem; line-height: 1.25rem;
text-base	font-size: 1rem; line-height: 1.5rem;
text-lg	font-size: 1.125rem; line-height: 1.75rem;
text-xl	font-size: 1.25rem; line-height: 1.75rem;
text-2xl	font-size: 1.5rem; line-height: 2rem;
text-3xl	font-size: 1.875rem; line-height: 2.25rem;
text-4xl	font-size: 2.25rem; line-height: 2.5rem;
text-5xl	font-size: 3rem; line-height: 1;
text-6xl	font-size: 3.75rem; line-height: 1;
text-7xl	font-size: 4.5rem; line-height: 1;
text-8xl	font-size: 6rem; line-height: 1;
text-9xl	font-size: 8rem; line-height: 1;

使い方

text-{size}ユーティリティーを使って、要素のフォントサイズを制御します。

<p class="text-xs ...">The quick brown fox ...</p>
<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>
<p class="text-3xl ...">The quick brown fox ...</p>
<p class="text-4xl ...">The quick brown fox ...</p>
<p class="text-5xl ...">The quick brown fox ...</p>
<p class="text-6xl ...">The quick brown fox ...</p>
<p class="text-7xl ...">The quick brown fox ...</p>
<p class="text-8xl ...">The quick brown fox ...</p>
<p class="text-9xl ...">The quick brown fox ...</p>

レスポンシブ

特定のブレークポイントにおける要素のフォントサイズを制御するには、既存のフォントサイズユーティリティーに{screen}: というプレフィックスを追加します。例えば、md:text-lgを使用すると、medium スクリーンサイズ以上でのみtext-lgユーティリティを適用することができます。

<p class="text-base md:text-lg ...">The quick brown fox jumped over the lazy dog.</p>

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

カスタマイズ

フォントサイズ

デフォルトでは、Tailwind は 10 個のfont-sizeユーティリティを提供しています。これらを変更、追加、または削除するには、Tailwind の設定のtheme.fontSizeセクションを編集します。

tailwind.config.js

  module.exports = {
    theme: {
      fontSize: {
-      'xs': '.75rem',
-      'sm': '.875rem',
+      'tiny': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
-      '3xl': '1.875rem',
-      '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '4rem',
+      '7xl': '5rem',
      }
    }
  }

デフォルトの行の高さの提供

tailwind.config.jsファイルの中で、[fontSize, lineHeight]という形式のタプルを使って、フォントサイズごとにデフォルトの行の高さを提供することができます。

tailwind.config.js

module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    }
  }
}

私たちはすでに、各.text-{size}クラスにデフォルトの行の高さを提供しています。

デフォルトのレタースペーシングの提供

フォントサイズに対するデフォルトの字間の値も提供したい場合は、tailwind.config.jsファイルの中で、[fontSize, { letterSpacing, lineHeight }]という形式のタプルを使って行うことができます。

tailwind.config.js

module.exports = {
  theme: {
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // あるいは、デフォルトのラインの高さでも
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    }
  }
}

バリアント

デフォルトでは、レスポンシブバリアントのみがテキストサイジングユーティリティのために生成されます。

tailwind.config.jsファイルのvariantsセクションにあるfontSizeプロパティを変更することで、テキストサイズ変更ユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+      fontSize: ['hover', 'focus'],
      }
    }
  }

無効化

テキストサイズ変更ユーティリティーをプロジェクトで使用しない場合は、設定ファイルのcorePluginsセクションでfontSizeプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+    fontSize: false,
    }
  }

---