[v4] New color opacity syntax not working with Svelte class directives

[omaishar]

One the new changes in Tailwind v4 is the deprecation of bg-opacity-*. Tailwind v4 uses the syntax bg-black/50 instead.

However, it does not seem to work with Svelte's class directives.
Example:

Tailwind v3 - works!
<div class:bg-gray-500={isDisabled} class:bg-opacity-50={isDisabled} ...>

Tailwind v4 - does not work!
<div class:bg-gray-500/50={isDisabled} ...>

Any ideas?

[philipp-spiess]

Hey @omaishar! Yeah unfortunately slashes inside class names are not supported by the class directive in Svelte right now.

You can make it work around this limitation by adding classes like this, though:

<div class="{ isDisabled ? 'bg-gray-500/50' : '' }"></div>

I don't think there's going to be anything we can do to fix this from our end but there seems to be appetite like there's interest in allowing more characters in css class names if you take a look at this issue: sveltejs/svelte#7170

[omaishar]

Issue svelteks/svekte#7170 is not really helpful here.

The workaround works but it's also very annoying. If you could return back the bg-opacity-X it would be great.

[philipp-spiess]

Issue 7170 is not really helpful here.

If you look through the latest api examples and the commit that is being worked on, it takes slashes in class names into account now. So provided this will make it into Svelte core, it will fix this issue: sveltejs/svelte#7170 (comment)