【Tailwind和訳】TYPOGRAPHY/Text Transform

この記事について

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

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

Text Transform

テキストの変換を制御するためのユーティリティ。

Class	Properties
uppercase	text-transform: uppercase;
lowercase	text-transform: lowercase;
capitalize	text-transform: capitalize;
normal-case	text-transform: none;

Normal Case

元のケーシングを維持するには、normal-caseユーティリティを使用します。これは通常、異なるブレイクポイントで大文字をリセットするために使用されます。

<p class="normal-case ...">The quick brown fox ...</p>

Uppercase

テキストを大文字にするには、uppercaseユーティリティを使用します。

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

Lowercase

テキストを小文字にするには、lowercaseユーティリティを使用します。

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

Capitalize

テキストを大文字にするには、Capitalize ユーティリティーを使用します。

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

レスポンシブ

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

<p class="capitalize md:uppercase ...">The quick brown fox jumped over the lazy dog.</p>

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

カスタマイズ

バリアント

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

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

例えば、この設定ではhoverとfocusのバリアントも生成されます。

tailwind.config.js

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

無効化

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

tailwind.config.js

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