diff --git a/src/plugins/objectPosition.js b/src/plugins/objectPosition.js
--- a/src/plugins/objectPosition.js
+++ b/src/plugins/objectPosition.js
@@ -1,5 +1,8 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
+import { asList } from '../util/pluginUtils'
 
 export default function () {
-  return createUtilityPlugin('objectPosition', [['object', ['object-position']]])
+  return createUtilityPlugin('objectPosition', [['object', ['object-position']]], {
+    resolveArbitraryValue: asList,
+  })
 }

diff --git a/tests/jit/arbitrary-values.test.css b/tests/jit/arbitrary-values.test.css
--- a/tests/jit/arbitrary-values.test.css
+++ b/tests/jit/arbitrary-values.test.css
@@ -260,6 +260,12 @@
 .stroke-\[\#da5b66\] {
   stroke: #da5b66;
 }
+.object-\[50\%\2c 50\%\] {
+  object-position: 50% 50%;
+}
+.object-\[top\2c right\] {
+  object-position: top right;
+}
 .object-\[var\(--position\)\] {
   object-position: var(--position);
 }
diff --git a/tests/jit/arbitrary-values.test.html b/tests/jit/arbitrary-values.test.html
--- a/tests/jit/arbitrary-values.test.html
+++ b/tests/jit/arbitrary-values.test.html
@@ -97,6 +97,8 @@
     <div class="from-[var(--color)] via-[var(--color)] to-[var(--color)]"></div>
     <div class="fill-[#da5b66]"></div>
     <div class="fill-[var(--color)]"></div>
+    <div class="object-[50%,50%]"></div>
+    <div class="object-[top,right]"></div>
     <div class="object-[var(--position)]"></div>
     <div class="stroke-[#da5b66]"></div>
     <div class="leading-[var(--leading)]"></div>

Object Position in JIT mode
### What version of Tailwind CSS are you using?

2.2.4

### What build tool (or framework if it abstracts the build tool) are you using?

Vite (with SvelteKit)

### What version of Node.js are you using?

v14.17.3

### What browser are you using?

Safari, Firefox

### What operating system are you using?

macOS Big Sur

### Reproduction repository

N/A

### Describe your issue

Using dynamic values on Object Position (top, bottom etc.) doesn't work as expected.
I want to do this: `object-top-[30%]`
Seems to be a bug:

`object-[30%]` works but `object-[0,30%]` should compile to `object-position: 0 30%` but right now it compiles to `object-position: 0,30%`.
