Generating multiple domains (text-*, bg-*, fill-*) with one declaration

[non25]

Hey!

I'm trying to come up with a way to set up semantic design system with tailwind v4.

I have separate size, padding and gap semantic token domains.

As far as I understood the only way to declare more than one domain, for example for text-primary and fill-primary I'd need two lines of css property declarations: --text-color-primary and --fill-color-primary with the same value.

Is there a way to abstract generating multiple domains per value so I could

--utility-domains-that-make-sense-for-gap-2xs: var(--space-component-gap-2xSmall);

instead of

/* if this even works, I haven't tested. For colors similar stuff works */
--gap-spacing-2xs: var(--space-component-gap-2xSmall);
--margin-spacing-2xs: var(--space-component-gap-2xSmall);
/* more domains with the same value to generate multiple utilities */

or I'd need to resort for css code-generation for that?

[wongjn]

You can use --spacing which does gap and margin, but it also covers padding, width, etc. There is no to "choose" which.