【Tailwind和訳】LAYOUT /Object Position

この記事について

この記事は、LAYOUT /Object Positionの記事を和訳したものです。

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

Object Position

置換された要素のコンテンツがコンテナ内でどのように配置されるかを制御するためのユーティリティです。

Class	Properties
object-bottom	object-position: bottom;
object-center	object-position: center;
object-left	object-position: left;
object-left-bottom	object-position: left bottom;
object-left-top	object-position: left top;
object-right	object-position: right;
object-right-bottom	object-position: right bottom;
object-right-top	object-position: right top;
object-top	object-position: top;

使い方｜ Usage

object-{side} ユーティリティを使用して、置き換えられた要素のコンテンツをコンテナ内に配置する方法を指定します。

<img class="object-none object-left-top bg-yellow-300 w-24 h-24 ..." src="..." />
<img class="object-none object-top bg-yellow-300 w-24 h-24 ..." src="..." />
<img class="object-none object-right-top bg-yellow-300 w-24 h-24 ..." src="..." />
<img class="object-none object-left bg-yellow-300 w-24 h-24 ..." src="..." />
<img class="object-none object-center bg-yellow-300 w-24 h-24 ..." src="..." />
<img class="object-none object-right bg-yellow-300 w-24 h-24 ..." src="..." />
<img class="object-none object-left-bottom bg-yellow-300 w-24 h-24 ..." src="..." />
<img class="object-none object-bottom bg-yellow-300 w-24 h-24 ..." src="..." />
<img class="object-none object-right-bottom bg-yellow-300 w-24 h-24 ..." src="..." />

レスポンシブ｜ Responsive

特定のブレイクポイントでのみオブジェクトを配置するには、既存のオブジェクト・ポジション・ユーティリティーに {screen}: というプレフィックスを追加します。例えば、ある要素に md:object-top というクラスを追加すると、medium のスクリーンサイズ以上で object-top ユーティリティーが適用されます。

<img class="object-center md:object-top ..." src="..." />

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

カスタマイズ｜ Customizing

オブジェクトのポジショニング

デフォルトでは、Tailwind は 9 つのオブジェクト位置ユーティリティを提供します。 Tailwind 構成の theme.objectPosition セクションを編集することで、これらを変更、追加、または削除できます。

tailwind.config.js

  module.exports = {
    theme: {
      objectPosition: {
        bottom: 'bottom',
        center: 'center',
        left: 'left',
-      'left-bottom': 'left bottom',
-      'left-top': 'left top',
        right: 'right',
        'right-bottom': 'right bottom',
        'right-top': 'right top',
        top: 'top',
+      'center-bottom': 'center bottom'
+      'center-top': 'center top',
      }
    }
  }

バリアント

デフォルトでは、オブジェクトポジションユーティリティに対しては、レスポンシブバリアントのみが生成されます。

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

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

tailwind.config.js

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

無効化

プロジェクトでオブジェクト位置ユーティリティを使用する予定がない場合は、構成ファイルの corePlugins セクションで objectPosition プロパティを false に設定することで、それらを完全に無効にすることができます。

tailwind.config.js

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