Object Position

Use the utilities to specify how a replaced element’s content should be positioned within its container.

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 utility at medium screen sizes and above.

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

all

sm

md

lg

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.

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 section of your tailwind.config.js file.

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

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 in the corePlugins section of your config file: