フォントウェイト

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

Class reference

Class
Properties
.font-hairlinefont-weight: 100;
.font-thinfont-weight: 200;
.font-lightfont-weight: 300;
.font-normalfont-weight: 400;
.font-mediumfont-weight: 500;
.font-semiboldfont-weight: 600;
.font-boldfont-weight: 700;
.font-extraboldfont-weight: 800;
.font-blackfont-weight: 900;

使用方法

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

.font-hairline

The quick brown fox jumped over the lazy dog.

.font-thin

The quick brown fox jumped over the lazy dog.

.font-light

The quick brown fox jumped over the lazy dog.

.font-normal

The quick brown fox jumped over the lazy dog.

.font-medium

The quick brown fox jumped over the lazy dog.

.font-semibold

The quick brown fox jumped over the lazy dog.

.font-bold

The quick brown fox jumped over the lazy dog.

.font-extrabold

The quick brown fox jumped over the lazy dog.

.font-black

The quick brown fox jumped over the lazy dog.

<p class="font-hairline ...">The quick brown fox ...</p>
<p class="font-thin ...">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>

レスポンシブ

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

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

<p class="font-normal sm:font-bold md:font-thin lg:font-semibold xl:font-black ...">The quick brown fox jumped over the lazy dog.</p>

The quick brown fox jumped over the lazy dog.

Hover

ホバー時の要素のフォントの重みを制御するには、既存のスタイルおよび装飾ユーティリティに hover:プレフィックスを追加します。 たとえば、hover:font-boldを使用して、ホバーにfont-boldユーティリティを適用します。

<div class="text-center text-blue-700">
  <a href="#" class="font-normal hover:font-bold">Hover over this link</a>
</div>

ホバーユーティリティは、レスポンシブ{screen}:プレフィックスをhover:プレフィックスのに追加することで、レスポンシブユーティリティと組み合わせることもできます。

<a href="#" class="... md:font-normal md:hover:font-bold ...">Link</a>

Focus

フォーカスされている要素のフォントの重みを制御するには、既存のスタイルおよび装飾ユーティリティにfocus:プレフィックスを追加します。 たとえば、focus:font-boldを使用して、font-boldユーティリティをフォーカスに適用します。

<input class="font-normal focus:font-bold ..." value="Focus me">

フォーカスユーティリティは、レスポンシブ{screen}:プレフィックスをfocus:プレフィックスのに追加することで、レスポンシブユーティリティと組み合わせることもできます。

<input class="... md:font-normal md:focus:font-bold ..." value="Focus me">

カスタマイズ

Font Weights

デフォルトでは、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,
      }
    }
  }

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive, hover and focus バリアントはfont weight utilitiesのために作られます。

あなたはどのバリアントがfont weight utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのfontWeightプロパティを修正することによってコントロールできます。

例として、この設定は also active and group-hover バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     fontWeight: ['responsive', 'hover', 'focus'],
+     fontWeight: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
    }
  }

無効にする

もしfont weight utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのfontWeight propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!