--spacing-* is not allowed to be used when generating functional utilities

[AiSirachcha21]

What version of Tailwind CSS are you using?

v4.1.7

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

No build tool, using distributed CSS file directly.

What version of Node.js are you using?

v22.12.0

What browser are you using?

Firefox 138.0.3

What operating system are you using?

Windows

Reproduction URL
https://play.tailwindcss.com/fAp6k8fj6E?file=css

Describe your issue
I am attempting to create a utility similar to size-{--spacing-*} (ex: size-4, size-8 etc.) but with min-width and min-height named min-size-xx (xx being the value)

I have created multiple functional utilities with v4.1.7 before but for some reason the --spacing-* utility is not allowed to be added into the --value() function.

It works when I use --text-*, --leading-* etc etc.

When attempting to use this and build it via the tailwindcss script it errors out saying

Error: Cannot apply unknown utility class: min-size-4

The script I'm executing via yarn is

tailwindcss -i ./path/to/file.css -o ./path/to/file.dist.css

[adamwathan]

Looks like you're trying to use --sizing-* but haven't actually defined any variables in that namespace:

@import "tailwindcss";

@theme {
  /* ... */
}

@utility min-size-* {
  min-width: --value(--sizing- *);
  min-height: --value(--sizing- *);
}

--sizing-* isn't a thing in Tailwind by default, so there is no min-size-4 utility for example with this setup.

Is this what you're trying to do? With --spacing, not --sizing-*?

https://play.tailwindcss.com/6PZE0XcPcq?file=css

[AiSirachcha21]

But what if I want to use the default Tailwind size variables ? Like w-4, p-4 etc etc. is there no way to generate these classes ? Because I can do this but the intellisense doesn't kick in to see suggested values

The solution you suggested was what I initially did but I assumed since the namespaces available in the theme namespaces documentation were the ones we were supposed to use, I also assume that the spacing namespace would generate the different size variants.

If not then I think this is a bit misleading in the docs right ?

The reference i was making was here

So then i referred to these

[AiSirachcha21]

I made a mistake there with the --sizing it should be --spacing

But my question still stands,

How does Tailwind generate its sizing utilities then ?

I understand it's a fairly minor thing but we're also using Tailwind to maintain system of sorts where only allow the use of the --spacing variable for our sizes (unless another unit is needed over rem)

So the goal is to get the intellisense provided by the plugin but I haven't been able to get that with the --value(integer) you're proposing

[wongjn]

You can use --spacing(x) which is syntactic sugar for calc(var(--spacing) * x): https://play.tailwindcss.com/5mgZeqBdhX?file=css
This also enables intellisense suggestions of the predefined spacing scale.

[AiSirachcha21]

Ahhhh that's perfect @wongjn , is there a place in the source code you can point me to in order to understand that better ? This is the answer but I wanna deep dive too haha. Thank you !

[wongjn]

• Here's the code for --spacing()
• The PR that added intellisense suggestions for --spacing(): Add suggestions when --spacing(--value(integer, number)) is used #17308