[v4] ad-hoc var declaration dx degredation

[datner]

What version of Tailwind CSS are you using?

For example: v4.0.0-beta.2

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

For example: tailwind v4 + astro (the plugin was simple to replace)

What version of Node.js are you using?

For example: n/a

What browser are you using?

For example: n/a

What operating system are you using?

For example: n/a

Reproduction URL

it's 'required' but n/a

Describe your issue

v3: [--gutter:theme(spacing.8)] -- better than raw CSS, not amazing, but very clear in the code
v4: [--gutter:calc(var(--spacing)_*_8)] -- oh no
I expected it to be [--gutter:--spacing-8] magic'd in using dynamic spacing, but no, also can't use --spacing_*_8 or some other shorthand, only the full expression

[philipp-spiess]

Hey! Not really a bug so I moved it to discussions but thanks for sharing the feedback.

You can bring back the old scales if you want by doing something like this:

@theme {
  --spacing-*: initial;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  /* etc. */
}

But yeah, I do agree that the calc(var(--spacing)*8) call is not super nice and intuitive. We've actually been thinking of some APIs to make this nicer (maybe something like a spacing() function i.e. [--gutter:--spacing(8)], but haven't decided on wether or not to move forward with an API like this. Thank you for sharing your feedback like this, though!

[datner]

Oh I didn't think it was a bug, I literally meant that it was a dx degradation, it's working fine
not sure how I like --spacing(8) I only know to say that I don't like calc(var(--spacing)*8) lol