💤

【Tailwind和訳】TYPOGRAPHY/Text Align

2021/10/24に公開約2,100字

この記事について

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

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

Text Alignment

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

Class Properties
text-left text-align: left;
text-center text-align: center;
text-right text-align: right;
text-justify text-align: justify;

使い方

text-lefttext-centertext-righttext-justifyの各ユーティリティを使って、要素のテキスト配置を制御します。

<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>

レスポンシブ

特定のブレークポイントにおける要素のテキスト配置を制御するには、既存のテキスト配置ユーティリティーに{screen}:というプレフィックスを追加します。例えば、md:text-centerを使うと、medium スクリーンサイズ以上でのみtext-centerユーティリティを適用することができます。

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

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

カスタマイズ

バリアント

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

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

例えば、このコンフィグはホバーとフォーカスのバリアントも生成します。

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

無効化

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

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

Discussion

ログインするとコメントできます