Object Position in JIT mode

[nfq]

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%.

[adamwathan]

Will be fixed in the next patch release, hopefully Monday or Tuesday 👍 Thanks!

[nfq]

Thanks for the quick fix!

[MaluNoPeleke]

@adamwathan I have updated to the latest 2.2.11 release but cannot make it work with this class and JIT: object-[76%, 51%]
I see no change in the CSS applied to the img element. What am I missing?

[mplis-ta]

I have updated to the latest 2.2.11 release but cannot make it work with this class and JIT: object-[76%, 51%] I see no change in the CSS applied to the img element. What am I missing?

Did you try removing the space?

https://tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support

Values with spaces
It’s also important to note that CSS classes cannot contain spaces, which means you can’t use arbitrary values like calc(100px - 4rem) or 1fr 700px 2fr as-is. To use arbitrary values like this in your class names, you need to remove the spaces in things like calc calls, and replace the spaces with commas in lists like 1fr 700px 2fr. Tailwind will automatically re-introduce the spaces for you in calc calls and replace the commas with spaces in lists when generating the corresponding CSS.

[calvinballing]

Ensure that the content array in your tailwind.config.js file includes the file where you have included the arbitrary value. I was having trouble with an arbitrary value, until I realized I had made this mistake.