[v4] How to use multiple spacing units?

[GJGabor]

I had my custom config for the v3 which contained many generated custom spacing units including rem, px, vh, vw. I could use them in html easily like: 'h-5.525rem' or 'h-33vh' or 'h-200px'. I was also using the same for all other spacing based selectors such as padding, margin, and so on.

Currently, in v4 we have one single --spacing value as I understood. I tried to define custom utilities such as h-* { height: --value(); } to allow 'h-33vh' for example. But it is not working. Moreover, it would be huge work to redefine all selectors, such as h-, w-, p-, m-* and so on.

So, my question is:
What would be the way to have multiple spacing units across the whole system?

ps.: I know, I can use arbitrary values such as 'h-[33vh]' but that isn't what I'm looking for now. I don't want to pollute the markup with many custom values if there would be any other config level option.

[wongjn]

What was your config like in v3 that enable your units to work?

[GJGabor]

I generated all values via custom js iteration under the config / theme / extend / spacing. Values were like { '50vh': '50vh', '25px': '25px' }. Basically, the goal was to have exact values with units suffixes using predefined ranges and steps. So, I couldn't use 'h-53vh' if it wasn't defined in the config.

In v4 I can define custom utilities but as I understood, I have to declare --spacing- first, then I have to declare h-, w-, p-, pl-, pr-*, ... utilities to achieve the same goal. It feels like a hack so I don't really want to do it.

The ideal solution would be to have multiple units support for spacing instead of the current single --spacing: 0.25rem - which would be applied to all built-in utilites which are already using the --spacing value. So, instead of h-px we would have h-*px > h-5px = height: 5px or h-*vh > h-55vh = height: 55vh.

I know it is already supported via the h-[5px] and h-[55vh] custom values. However, that is unlimited, so I can't limit which values can be used.

[wongjn]

You can at least do:

@theme {
  --spacing-50vh: 50vh;
}

<div class="h-50vh m-50vh p-50vh">

[GJGabor]

Thanks!

I misunderstood what I read in the documentation. That was unclear how the --spacing: 0.25rem works because that has no suffix. However, I double checked the "Theme variable namespaces" which contains --spacing-*. It is confusing how variables are working without the '-*' suffix? In other sections I read I can override the namespace by setting the value to be 'initial' but again, examples are like '--color-*: initial' instead of '--color: initial'.

What would happen if I set '--color: red' instead of '--color-*:red'? Can I set the value to be 'red'? Or the 'initial' supported only?

Anyways, thank you for your help! I can port my v3 sizing solution to v4 now :)