フォントスタイル

テキストのスタイルを制御するためのユーティリティ。

Class reference

Class
Properties
.italicfont-style: italic;
.not-italicfont-style: normal;

No Italics

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

The quick brown fox jumped over the lazy dog.

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

Italics

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

The quick brown fox jumped over the lazy dog.

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

レスポンシブ

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

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

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

The quick brown fox jumped over the lazy dog.

カスタマイズ

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!