Resolves text-[--spacing(n)] as color instead of font-size

[marcjulian]

What version of Tailwind CSS are you using?

For example: v4.3.0, v4.3.1

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

For example: @tailwindcss/postcss 4.3.1, postcss 8.5.15, Angular v22

What version of Node.js are you using?

For example: v24.15.0

What browser are you using?

For example: Chrome, Firefox

What operating system are you using?

For example: macOS

Reproduction URL

Show casing the generated classes in TailwindPlay and a playground repository from spartan/ui for example in the hlm-spinner component uses the longer class name.

Describe your issue

Using the arbitrary value syntax text-[--spacing(n)] to align font sizes with the spacing scale, to mimic size-4, resolves the class as color rather than font-size property.

This issue came up while porting shadcn styles to Angular spartan/ui using ng-icon. The icon sizes follows the font size, thus we need to replace size-4 with text-[--spacing(4)].

Angular template

<ng-icon name="lucideLoader2 class="text-[--spacing(8)]" />

Generated CSS - validate in the TailwindPlay

.text-\[--spacing\(8\)\] {
  color: calc(var(--spacing) * 8);
}

Expected Generated CSS - text- util can be used for colors but also for font-size and expected it to produce

.text-\[--spacing\(8\)\] {
  font-size: calc(var(--spacing) * 8);
}

As an alternative, we use text-[calc(var(--spacing)*4)] directly using var(--spacing) and not the --spacing(4) function. This resolves to a class with font-size property.

.text-\[calc\(var\(--spacing\)\*8\)\] {
  font-size: calc(var(--spacing) * 8);
}

Another alternative class could be text-[calc(--spacing(4))], included in the TailwindPlay, which resolves also to font-size property, but includes the calc from the arbitrary syntax and additionally from the --spacing() function.

.text-\[calc\(--spacing\(8\)\)\] {
  font-size: calc(calc(var(--spacing) * 8));
}

---

Tailwind CSS IntelliSense

When using the alternative class text-[calc(var(--spacing)*4)] and Tailwind CSS IntelliSense is installed in VSCode, it suggest to replace the class with the shorter version text-[--spacing(4)].

Suggestion

Quick Fix

IntelliSense for `text-[calc(var(--spacing)*4)]`

IntelliSense for `text-[--spacing(4)]`