【Tailwind和訳】TYPOGRAPHY/Font Weight

この記事について

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

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

Font Weight

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

クラス	プロパティ
font-thin	font-weight: 100;
font-extralight	font-weight: 200;
font-light	font-weight: 300;
font-normal	font-weight: 400;
font-medium	font-weight: 500;
font-semibold	font-weight: 600;
font-bold	font-weight: 700;
font-extrabold	font-weight: 800;
font-black	font-weight: 900;

使用法

font-{weight}ユーティリティを使用して、要素のフォントの太さを制御します。

<p class="font-thin ...">The quick brown fox ...</p>
<p class="font-extralight ...">The quick brown fox ...</p>
<p class="font-light ...">The quick brown fox ...</p>
<p class="font-normal ...">The quick brown fox ...</p>
<p class="font-medium ...">The quick brown fox ...</p>
<p class="font-semibold ...">The quick brown fox ...</p>
<p class="font-bold ...">The quick brown fox ...</p>
<p class="font-extrabold ...">The quick brown fox ...</p>
<p class="font-black ...">The quick brown fox ...</p>

レスポンシブ

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

<p class="font-normal md:font-bold ...">The quick brown fox jumped over the lazy dog.</p>

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

カスタマイズ

フォントの太さ

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

tailwind.config.js

  module.exports = {
    theme: {
      fontWeight: {
-       hairline: 100,
+       'extra-light': 100,
-       thin: 200,
        light: 300,
        normal: 400,
        medium: 500,
-       semibold: 600,
        bold: 700,
-       extrabold: 800,
+       'extra-bold': 800,
        black: 900,
      }
    }
  }

バリアント

デフォルトでは、font weight ユーティリティに対してレスポンシブバリアントのみが生成されます。

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

例えば、このコンフィグは hover と focus のバリエーションも生成します。

tailwind.config.js

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

無効化

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

tailwind.config.js

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