Tokens do not support tw-opacity

[PrisionMikeLime]

Current Behavior

When using bg-primary-50-900-token for example the code generated is:

.dark .bg-primary-50-900-token {
    background-color: rgb(var(--color-primary-900));
}
.bg-primary-50-900-token {
    background-color: rgb(var(--color-primary-50));
}
.dark .bg-primary-50-900-token {
    background-color: rgb(var(--color-primary-900));
}

So using tailwind opacity has no effect.

Expected Behavior

Generated code should support tw opacity

.dark .bg-primary-50-900-token {
    background-color: rgb(var(--color-primary-900) / var(--tw-text-opacity));
}
.bg-primary-50-900-token {
    background-color: rgb(var(--color-primary-50) / var(--tw-text-opacity));
}
.dark .bg-primary-50-900-token {
    background-color: rgb(var(--color-primary-900) / var(--tw-text-opacity));
}

Steps To Reproduce

Simply use tailwind's opacity feature with a bg with token: class=`bg-primary-50-900-token bg-opacity-60` .

Link to Reproduction / Stackblitz

No response

More Information

I believe other uses of color might need to support transparency too.

[endigo9740]

@PrisionMikeLime this sounds interesting, but I'd have to test to ensure this works in this manner.

I've also relabeled this as a feature as the current implementation is working as expected. This behavior is not a bug, but rather a new feature request.

[endigo9740]

@PrisionMikeLime after reviewing this, unfortunately Tailwind does not seem to provide a way to pass down opacity from a custom utility class as you described. See my reproduction here:

https://play.tailwindcss.com/ih7AFNWnws

Check the HTML/CSS tabs to see this in practice.

I'd recommend that if you need this approach, you break out the individual classes and apply opacity directly to those.