text-transform

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

クラススタイル

uppercase

text-transform: uppercase;

lowercase

text-transform: lowercase;

capitalize

text-transform: capitalize;

normal-case

text-transform: none;

例

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

すばやい茶色のキツネはのろまな犬を飛び越えます。

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

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

すばやい茶色のキツネはのろまな犬を飛び越えます。

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

要素のテキストをキャピタライズするには、capitalizeユーティリティを使用します。

すばやい茶色のキツネはのろまな犬を飛び越えます。

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

要素の元のテキストケースを保持するには、normal-caseユーティリティを使用します。通常、さまざまなブレークポイントでキャピタライゼーションをリセットするために使用されます。

すばやい茶色のキツネはのろまな犬を飛び越えます。

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

プレフィックスa text-transform ユーティリティ md:のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 以上の画面サイズのみになります。

<p class="capitalize md:uppercase ...">
  Lorem ipsum dolor sit amet...
</p>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。