New opacity modifier syntax

[vedmant]

I see deprecation of classes like bg-opacity-50 instead to use bg-color/50 but how then I should add opacity to a component that alrady has background specified. For example I have a blue button, I import in to a different place and add opacity on top as a separate class bg-opacity-50, I will not be able to do so.

Another example, I have conditional opacity like this:

    <button
      :class="[modelValue ? 'bg-opacity-100 text-white' : 'bg-opacity-0 text-gray-500', disabled ? 'opacity-50' : '']"
      class="rounded-full bg-gray-900 py-1 px-2 transition-all"
      :disabled="disabled"
      @click="!modelValue && $emit('update:modelValue', true)"
    >
      {{ onText }}
    </button>

If opacity classes are deprecated I need to repeat bg-gray-900/* 3 times (bg-gray-900/100, bg-gray-900/0, bg-gray-900/50), which is less cleaner code,

Also will not allow to overwrite color if I import this button like !bg-blue-900 for example, it will break all opacity states.

What is the point of deprecating opacity classes? This just makes more problems that solves anything.

[luizov]

This is from the docs:
Every other situation behaves the same, so aside from that change your projects will work exactly as they did before. We do recommend using the new syntax going forward though, and plan to disable utilities like border-opacity-* and bg-opacity-* by default in v4, though you will still be able to enable them if needed.

Looks like we will be able to use the bg-opacity utility classes even in v4 of Tailwind so I wouldn't worry.
Also one could argue that your example is a little verbose: for example on the disabled state you are changing the opacity of the whole element, not just the background. And in the ternary condition you don't need the bg-oapcity-100 because it is such by default.
But yeah, I see your point.