Object Position

Usage

Use the object-{side} utilities to specify how a replaced element’s content should be positioned within its container.

Responsive

To position an object only at a specific breakpoint, add a {screen}: prefix to any existing object position utility. For example, adding the class md:object-top to an element would apply the object-top utility at medium screen sizes and above.

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

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

Object Positioning

By default, Tailwind provides nine object position utilities. You can change, add, or remove these by editing the theme.objectPosition section of your Tailwind config.

  // 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',
      }
    }
  }

Variants

默認情況下, 只有 響應式 的 object position 變化模式 (variants) 會產生。

在 tailwind.config.js 的 variants 區塊中變更 objectPosition 屬性來決定有哪些變化模式會生成。

舉個例子來說，這個設定將會生成 響應式 和 hover 的變化模式。

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

Disabling

如果你不打算在專案中使用 object position 功能，可以在你的設定檔裡的 corePlugins 屬性中將 objectPosition 設定為 false 來停用功能：

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