Add object-{top,bottom}-{left,right} utilities (#17437)

These match the new `mask-*` and updated `bg-*` utilities.

This is the same as #17378 but for `object-position`.

| Deprecated utility    | New utility           |
| --------------------- | --------------------- |
| `object-left-top`     | `object-top-left`     |
| `object-right-top`    | `object-top-right`    |
| `object-left-bottom`  | `object-bottom-left`  |
| `object-right-bottom` | `object-bottom-right` |

Author: thecrypticace

CHANGELOG.md

@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added new `bg-{top,bottom}-{left,right}` utilities ([#17378](https://github.com/tailwindlabs/tailwindcss/pull/17378))
 - Added new `bg-{position,size}-*` utilities for arbitrary values ([#17432](https://github.com/tailwindlabs/tailwindcss/pull/17432))
 - Added new `shadow-*/{alpha}`, `inset-shadow-*/{alpha}`, and `text-shadow-*/{alpha}` utilities to control shadow opacity ([#17398](https://github.com/tailwindlabs/tailwindcss/pull/17398))
+- Added new `object-{top,bottom}-{left,right}` utilities ([#17437](https://github.com/tailwindlabs/tailwindcss/pull/17437))
 
 ### Fixed
 

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -7982,19 +7982,19 @@ exports[`getClassList 1`] = `
   "not-italic",
   "not-sr-only",
   "object-bottom",
+  "object-bottom-left",
+  "object-bottom-right",
   "object-center",
   "object-contain",
   "object-cover",
   "object-fill",
   "object-left",
-  "object-left-bottom",
-  "object-left-top",
   "object-none",
   "object-right",
-  "object-right-bottom",
-  "object-right-top",
   "object-scale-down",
   "object-top",
+  "object-top-left",
+  "object-top-right",
   "oldstyle-nums",
   "opacity-0",
   "opacity-5",

packages/tailwindcss/src/compat/legacy-utilities.ts

@@ -29,6 +29,16 @@ export function registerLegacyUtilities(designSystem: DesignSystem) {
     decl('background-position', 'right bottom'),
   ])
 
+  // Legacy `object-position` utilities for compatibility with v4.0 and earlier
+  designSystem.utilities.static('object-left-top', () => [decl('object-position', 'left top')])
+  designSystem.utilities.static('object-right-top', () => [decl('object-position', 'right top')])
+  designSystem.utilities.static('object-left-bottom', () => [
+    decl('object-position', 'left bottom'),
+  ])
+  designSystem.utilities.static('object-right-bottom', () => [
+    decl('object-position', 'right bottom'),
+  ])
+
   designSystem.utilities.functional('max-w-screen', (candidate) => {
     if (!candidate.value) return
     if (candidate.value.kind === 'arbitrary') return

packages/tailwindcss/src/utilities.test.ts

@@ -17706,15 +17706,21 @@ test('object', async () => {
 
       // object-position
       'object-[var(--value)]',
+      'object-top',
+      'object-top-left',
+      'object-top-right',
       'object-bottom',
-      'object-center',
+      'object-bottom-left',
+      'object-bottom-right',
       'object-left',
+      'object-right',
+      'object-center',
+
+      // Legacy versions in v4.0 and earlier
       'object-left-bottom',
       'object-left-top',
-      'object-right',
       'object-right-bottom',
       'object-right-top',
-      'object-top',
     ]),
   ).toMatchInlineSnapshot(`
     ".object-contain {
@@ -17745,6 +17751,14 @@ test('object', async () => {
       object-position: bottom;
     }
 
+    .object-bottom-left {
+      object-position: left bottom;
+    }
+
+    .object-bottom-right {
+      object-position: right bottom;
+    }
+
     .object-center {
       object-position: center;
     }
@@ -17775,6 +17789,14 @@ test('object', async () => {
 
     .object-top {
       object-position: top;
+    }
+
+    .object-top-left {
+      object-position: left top;
+    }
+
+    .object-top-right {
+      object-position: right top;
     }"
   `)
   expect(

packages/tailwindcss/src/utilities.ts

@@ -3639,15 +3639,15 @@ export function createUtilities(theme: Theme) {
   staticUtility('object-none', [['object-fit', 'none']])
   staticUtility('object-scale-down', [['object-fit', 'scale-down']])
 
+  staticUtility('object-top', [['object-position', 'top']])
+  staticUtility('object-top-left', [['object-position', 'left top']])
+  staticUtility('object-top-right', [['object-position', 'right top']])
   staticUtility('object-bottom', [['object-position', 'bottom']])
-  staticUtility('object-center', [['object-position', 'center']])
+  staticUtility('object-bottom-left', [['object-position', 'left bottom']])
+  staticUtility('object-bottom-right', [['object-position', 'right bottom']])
   staticUtility('object-left', [['object-position', 'left']])
-  staticUtility('object-left-bottom', [['object-position', 'left bottom']])
-  staticUtility('object-left-top', [['object-position', 'left top']])
   staticUtility('object-right', [['object-position', 'right']])
-  staticUtility('object-right-bottom', [['object-position', 'right bottom']])
-  staticUtility('object-right-top', [['object-position', 'right top']])
-  staticUtility('object-top', [['object-position', 'top']])
+  staticUtility('object-center', [['object-position', 'center']])
   functionalUtility('object', {
     themeKeys: ['--object-position'],
     handle: (value) => [decl('object-position', value)],