Space sensitivity in inline variable declarations

[functasti]

What version of Tailwind CSS are you using?

v4.1.6

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

Vite 6.2.0

What version of Node.js are you using?

v22.13.1

What browser are you using?

Chrome 136

What operating system are you using?

Ubuntu Linux

Describe your issue

I’ve hit this a few times now.. there’s an inconsistency in how Tailwind handles CSS variable declarations inline versus in @theme. If there’s a space between the property name and value inline, it doesn’t work, but in @theme, it’s fine either way. It’s been pretty confusing.

For example, in the following code:

<div class="[--gap:40px] flex flex-col gap-[--gap]">
  <div class="size-5 bg-red-500"></div>
  <div class="size-5 bg-green-500"></div>
</div>

The above works as expected. However, introducing a space in the declaration, like so:

<div class="[--gap: 40px] flex flex-col gap-[--gap]">

causes the variable to no longer be recognized.

This behavior is inconsistent with @theme declarations, where both of the following work identically:

@theme {
  --gap:40px;
}

@theme {
  --gap: 40px;
}

It would be helpful if the space between the property name and value in the inline context is made insignificant to align with the standard CSS variable syntax and avoid potential confusion.