テキスト変換

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

Class reference

Class
Properties
.uppercasetext-transform: uppercase;
.lowercasetext-transform: lowercase;
.capitalizetext-transform: capitalize;
.normal-casetext-transform: none;

Normal Case

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

The quick brown fox jumped over the lazy dog.

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

Uppercase

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

The quick brown fox jumped over the lazy dog.

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

Lowercase

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

The quick brown fox jumped over the lazy dog.

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

Capitalize

.capitalizeユーティリティを使用してテキストを大文字にします。

The quick brown fox jumped over the lazy dog.

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

Responsive

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

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

<p class="uppercase sm:lowercase md:capitalize lg:normal-case xl:uppercase ...">
  The quick brown fox jumped over the lazy dog.
</p>

The quick brown fox jumped over the lazy dog.

Customizing

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!