オブジェクトポジション

置き換えられた要素のコンテンツをそのコンテナ内に配置する方法を制御するためのユーティリティ。

Class reference

Class
Properties
.object-bottomobject-position: bottom;
.object-centerobject-position: center;
.object-leftobject-position: left;
.object-left-bottomobject-position: left bottom;
.object-left-topobject-position: left top;
.object-rightobject-position: right;
.object-right-bottomobject-position: right bottom;
.object-right-topobject-position: right top;
.object-topobject-position: top;

使用方法

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

.object-left-top

.object-top

.object-right-top

.object-left

.object-center

.object-right

.object-left-bottom

.object-bottom

.object-right-bottom

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

レスポンシブ

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

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

<img class="object-center sm:object-top md:object-right lg:object-bottom xl:object-left ..." src="...">

カスタマイズ

Object Positioning

デフォルトでは、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',
      }
    }
  }

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!