Tailwind CSS on GitHub

Object Position

Utilities for controlling how a replaced element's content should be positioned within its container.

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

Usage

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

Left Top

Top

Right Top

Left

Center

Right

Left Bottom

Bottom

Right Bottom

<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

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

By default, only responsive variants are generated for object position utilities.

You can control which variants are generated for the object position utilities by modifying the objectPosition property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

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

Disabling

If you don't plan to use the object position utilities in your project, you can disable them entirely by setting the objectPosition property to false in the corePlugins section of your config file:

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