`bg-[10px_10%]` is missing background-size type checking

[lzt1008]

What version of Tailwind CSS are you using?

v3.1.8 or Insiders (4fddd2d)

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

tailwind cli

What version of Node.js are you using?

v16

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/tpx3OYFFsH

Describe your issue

As the Reproduction URL,

<div bg-[10px_10%]></div>
<div bg-[10%_10%]></div>
<div bg-[10px_10px]></div>

can generate

.bg-\[10px_10\%\] {
  background-position: 10px 10%;
}

which does not make sense, because all these values are valid (background-size and background-position) so it's ambiguous.

I've created a PR to solve this problem. #9349

[536f6e6179]

If I understand it correctly, you want to use background-size and background-position but as well as you do it, it is only background-position, to use background-size and background-position in one, you have to use bg-[position:XX_XX] and bg-[length:XX_XX].