VOOZH about

URL: https://www.geeksforgeeks.org/css/tailwind-css-object-position/

⇱ Tailwind CSS Object Position - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Tailwind CSS Object Position

Last Updated : 23 Jul, 2025

The Tailwind CSS Object Position class accepts more than one value. All the properties are covered as in class form. It is the alternative to the CSS object-position property. This class is used to specify, how an image or video element is positioned with x/y coordinates within its content box. It also controls the replacement of the element's content positioning within its container.

Object Position Classes

Classes

Descriptions

object-left-top

Positioned at the left top of the image or video.

object-top

Positioned at the top of the image or video.

object-right-top

Positioned at the right top of the image or video.

object-left

Positioned on the left of the image or video.

object-center

Positioned at the center of the image or video.

object-right

Positioned to the right of the image or video.

object-left-bottom

Positioned at the left bottom of the image or video.

object-bottom

Positioned at the bottom of the image or video.

object-right-bottom

Positioned at the right-bottom of the image or video.

Note: All classes are used in the below example.

Example: This example demonstrates the use of all object position classes.

Output: You can hover on the output image, each image will show its object position in the tooltip.

👁 Image
Comment