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.

[philipp-spiess]

@functasti The problem is that in the HTML markup, a space is the separator of a class name so if you do <div class="[--gap: 40px]"> the HTML treats it as two different class names [--gap: and 40px]. Nothing we can do about that unfortunately! If you need a space in there, we automatically convert underscores to space. So this works: [--gap:_40px].

[functasti]

@philipp-spiess Hmm... I see what you’re saying. It’s not that I need a space there - it just slips in accidentally, and it’s a pain to debug. :)

[functasti]

@philipp-spiess I get the explanation about the browser treating the space as a separator between class names, but what’s the actual impact in development time vs. runtime? I understand why spaces matter within the value itself, but why does the space between the colon and the value matter? Couldn’t Tailwind just strip it out at build time? That way, it wouldn’t split into separate class names, and it would prevent a whole class of bugs slipping in accidentally.

[philipp-spiess]

@functasti I'm not sure I understand your question but the issue is that if there are two class names: [--gap: and 40px], which one should we use in the CSS file? This seems wrong:

.\[\-\-gap\: {
  --gap: 40px;
}

but so does this:

.40px\] {
  --gap: 40px;
}

(the escaping could be wrong but you get the gist)

[functasti]

@philipp-spiess What I’m suggesting is that instead of treating it as two class names, handle it during the build process. When you see "[--gap: 40px]", normalize it to "[--gap:40px]". That way, it stays as a single class name, preventing the split and avoiding the issue altogether.

[philipp-spiess]

@functasti We don't rewrite your template files though, in that case in your template it would still be two classes so it wouldn't be able to map the CSS file accordingly.

[functasti]

@philipp-spiess Thanks! I have a clearer understanding of the challenge now.

[functasti]

@thecrypticace Idea: Could the VS Code IntelliSense plugin warn about cases where there’s a space between the variable declaration and value? It would effectively act as a linter and help catch these issues before they cause problems.