テキストの配置

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

Class reference

Class
Properties
.text-lefttext-align: left;
.text-centertext-align: center;
.text-righttext-align: right;
.text-justifytext-align: justify;

使用方法

.text-left,.text-center,.text-rightおよび.text-justifyユーティリティを使用して要素のテキスト配置を制御します。

.text-left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

.text-center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

.text-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

.text-justify

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

<p class="text-left ...">Lorem ipsum dolor sit amet ...</p>
<p class="text-center ...">Lorem ipsum dolor sit amet ...</p>
<p class="text-right ...">Lorem ipsum dolor sit amet ...</p>
<p class="text-justify ...">Lorem ipsum dolor sit amet ...</p>

Responsive

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

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

<p class="text-left sm:text-center md:text-right lg:text-justify xl:text-center ...">Lorem ipsum dolor sit amet ...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Customizing

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!