Clarity on using colors in custom utilities

[joezappie]

Technically this is documented in the Matching Theme Values documentation, but it wasn't immediately clear to me that this was how I can use theme colors. Now that I know it is the documentation makes sense, but I kept searching for "color" and the only mention of color is in the arbitrary values section. I actually gave up trying to make utilities with colors a few times in the past thinking it just wasn't supported.

Might be good to have an example showing using --value(--color-*); as colors are such a large part of tailwind.

@theme {
  --tab-size-2: 2;
  --tab-size-4: 4;
  --tab-size-github: 8;
  --color-primary: red;
}
@utility tab-* {
  tab-size: --value(--tab-size-*);
}
@utility glow-* {
  box-shadow: 0 0 2rem --value(--color-*);
}

I used it to add custom text stroke utility for width and color:

@utility text-stroke-* {
  -webkit-text-stroke-color: --value(--color-*);
  -webkit-text-stroke-color: --value([color]);
  -webkit-text-stroke-width: calc(--value(integer) * 1px);
  -webkit-text-stroke-width: --value([length]);
  paint-order: stroke fill;
}

EDIT: I just realized this however doesnt support things like text-stroke-white/80. Is there a way to support colors with opacity in a custom utility?