【Tailwind和訳】TYPOGRAPHY/Font Style

この記事について

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

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

Font Style

テキストのスタイルをコントロールするためのユーティリティ。

Class	Properties
italic	font-style: italic;
not-italic	font-style: normal;

斜体

テキストを斜体にするには、italicユーティリティーを使用します。

<p class="italic ...">The quick brown fox ...</p>

イタリックの取り消し

not-italicユーティリティを使用して、テキストを通常通りに表示します。これは通常、異なるブレークポイントでイタリック・テキストをリセットするために使用されます。

<p class="not-italic ...">The quick brown fox ...</p>

レスポンシブ

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

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

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

カスタマイズ

バリアント

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

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

例えば、このコンフィグはホバーとフォーカスのバリアントも生成します。

tailwind.config.js

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

無効化

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

tailwind.config.js

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